@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Italic-VariableFont_wght.ttf');src:url('../fonts/Montserrat-VariableFont_wght.ttf');}
@font-face{font-family:'MontserratBold';src:url('../fonts/Montserrat-Bold.ttf');}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.ttf');}
@font-face{font-family:'PoppinsBold';src:url('../fonts/Poppins-Bold.ttf');}
* {
  font-family: "Montserrat", "Poppins", sans-serif;
}
h1,
h2{
  font-family: "Poppins" , sans-serif;
}
body,
html,
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  max-width: 2560px;
  margin: auto;
  background-color: #171C1F;
  box-shadow: 0px 0px 10px 5px rgb(72, 192, 238);
}

strong {
  font-family: "MontserratBold" , sans-serif;
}

.clear {
  clear: both;
}

nav.navbar.navbar-default.navbar-fixed-top {
  height: 80px;
  background: none;
  border: none;
  transition: all ease 0.2s;
}


.navbar-brand>img {
  width: 190px;
  display: inline-block;
  margin-right: 10px;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-nav>li {
  line-height: 80px;
  height: 80px;
  padding: 0 20px;
}

.navbar-nav>li a {
  line-height: 80px;
  padding: 0 !important;
  display: inline;
  color: white !important;
  background: none !important;
}

.navbar-default .navbar-nav>.active>a {
  border-bottom: 2px solid white;
  padding: 5px 0 !important;
}

header .container {
  padding-top: 0px;
  padding-bottom: 130px;
  position: relative;
  z-index: 2;
}


header {
  background: url("../img/Background_login.webp");
  background-size: cover;
  background-position: center center;
  position: relative;
  padding-bottom: 100px;
}

header::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

header img {
  max-width: 100%;
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  width: 800px;
  right: 0;
  z-index: -1;
}

h2 {
  padding-top: 180px;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 26px;
}

h1 {
  color: white;
  text-transform: uppercase;
  margin-top: 0px;
  font-size: 34px;
  font-weight: 700;
}

header p {
  color: white;
  font-style: italic;
  margin-top: 20px;
  font-size: 15px;
}
button {
  background-color: #4CAF50;
  border: none;
  color: red;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
a.btn.btn-default {
  margin-top: 10px;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 0;
  border: 2px solid white;
  
  padding: 10px 20px;
  font-weight: 600;
}

a.btn.btn-default {
  background: white;
  border: 2px solid white;
  color: #243A4D;
}

a.btn.btn-default:hover {
  background: none;
  border: 2px solid white;
  color: white;
}
a.btn.btn-secondary{
  border: none;
  margin-top: 10px;
  font-size: 18px;
  text-transform: uppercase;
  color: white;
  font-weight: 600;
  background-color:#1AD1FF;
  color: white;
  position: relative;
  padding: 15px 20px 15px 50px;
  margin-top: 15px;
  transition: all ease 0.2s;
}
a.btn.btn-secondary i {
  position: absolute;
  left: 10px;
  top: 14px;
}
a.btn.btn-secondary p {
  margin: 0;
}
a.btn.btn-secondary:hover {
  background-color: #7289DA;
  border: none;
  color: white;
}

section {
  padding: 85px 0 55px;
}
P.blocktext {
  float:right;
  width: 6em;
  display:block;
}

section#features {
  background: url("../img/background1.webp") no-repeat;
}

section#PDC {
  font-weight: 30;
  text-align: left;
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 800px;
}

section h3 {
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  font-size: 36px;
  margin-bottom: 80px;
}

section h3 strong {
  font-weight: 600;
}

section h5 {
  font-weight: 300;
  text-align: left;
  text-transform: uppercase;
  font-size: 36px;
  margin-bottom: 80px;
}

section#features div img {
  max-width: 180px;
}

#features h4 {
  padding-top: 90px;
  font-size: 24px;
  text-transform: uppercase;
  color: #48c0ee;
}

#features p {
  font-size: 16px;
  font-weight: 500;
  color: #243A4D;
  margin-top: 20px;
}

#features section {
  clear: both;
}

section#patchnote {
  margin: -90px 0px -90px 0px;
  background:
  linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url("../img/Background_patch.webp");
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: cover;
  background-position: center center;
  /*box-shadow: 0px 0px 10px 5px rgb(72, 192, 238);;*/
  overflow: hidden;
  clip-path: polygon(0 0%, 10% 0%, 15% 10%, 85% 10%, 90% 0%, 100% 0%, 100% 100%, 90% 100%, 85% 90%, 15% 90%, 10% 100%, 0% 100%);
  height: 700px;
}

.shadow {
  filter: drop-shadow(0px 0px 10px rgba(72, 192, 238,1));
}

#whats_next img {
  max-width: 180px;
  width: 10em;
}


section#features .container{
  max-width: 1500px !important;
  width: auto !important;
}

.navbar .container{
  max-width: 1500px  !important;
  width: auto  !important;
}

header .container{
  max-width: 1300px  !important;
  width: auto  !important;
}

#whats_next .container {
  max-width: 1500px  !important;
  width: auto  !important;
}

.whats_next_section{
  display: flex;
  margin-bottom: 60px;
  text-align: center;
  width: 560px;
}

header{
  clip-path: polygon(0 0%,100% 0%, 100% 100%, 90% 100%, 85% 90%, 15% 90%, 10% 100%, 0% 100%);
  margin-bottom: -130px;
}
#download-link {
 white-space: normal;
 font-size: 16px;
}

#btn-patchnote{
  display: none;
}

#whats_next{
  background: url("../img/background2.webp") no-repeat;
}

#whats_next h2{
  padding-top: 0px;
  color: #243A4D;
}


#whats_next p{
  font-size: 16px;
  font-weight: 500;
  color: #243A4D;
  max-width: 350px;
  margin: 20px 10px;
}

#main {
  width: 40%;
  z-index: 2;
}

#patchnote .container{
  display: flex;
  justify-content: center;
}
.features-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.features-list-element{
  display: inline-block;
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  max-width: 320px;
  vertical-align: top;
}

.features-list-label{
  position: relative;
  font-size: 25px;
  font-weight: 700;
  line-height: 28px;
  margin: 10px 0 7px;
  color: rgb(72, 192, 238);
  text-transform: unset;
  font-family: "MontserratBold" , sans-serif;
}

.features-list-element img{
  width: 10em;

}

.features-title{
  color: #243A4D;
  text-align: center;
  font-weight: 350;
  font-size: 25px;
  padding-top: 20px;
  margin-bottom: 0px;
}

.next-title{
  color: #243A4D;
  text-align: center;
  font-weight: 350;
  font-size: 25px;
  padding-top: 20px;
  margin-bottom: 0px;
  margin-left: 5em;
}

#btn-next{
  background-color: rgb(72, 192, 238);
  color: white;

}

#video h3 {
  color: white;
}

.video {
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.2);
  line-height: 500px;
  color: white;
}

#apps h3 {
  color: white;
}

#apps .app_screenshot img {
  max-width: 300px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#apps h4 {
  color: white;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
}

#apps p {
  color: white;
  text-align: center;
  font-style: italic;
  margin-bottom: 30px;
}

.application {
  margin-bottom: 100px;
}

section#contact {
  background: white;
}

#contact p {
  font-size: 15px;
  font-weight: 600;
  color: #243A4D;
  margin-bottom: 40px;
}

#contact input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-color: #243A4D;
  border-width: 2px;
  color: #243a4d;
  font-weight: 600;
}

textarea {
  width: 100%;
  border: 2px solid #243A4D;
  padding: 10px;
  margin-top: 20px;
  font-weight: 600;
  color: #243a4d;
  resize: vertical;
}

#contact input[type="submit"] {
  display: inline-block;
  width: auto;
  padding: 10px 20px;
  background: #F7941E;
  margin-top: 20px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  border: 2px solid #F7941E;
  color: white;
}

#contact input[type="submit"]:hover {
  background: none;
  color: #F7941E;
}

footer ul li {
  display: inline-block;
  margin: 0 5px;
  background: none;
}

footer ul {
  background: none;
}

footer ul li a {
  width: 60px;
  height: 60px;
  display: inline-block;
  background: #dedede;
  border-radius: 50%;
  padding: 5px;
  font-size: 30px;
  color: white !important;
}

footer ul li a i {
  margin-top: 10px;
}

footer ul li:nth-of-type(1) a {
  background: #3b5998;
}

footer ul li:nth-of-type(2) a {
  background: rgb(112, 186, 237);
}

footer ul li:nth-of-type(3) a {
  background: rgb(218, 72, 53);
}
footer {
  background:
  url("../img/footer3.webp");
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 0px 10px 5px rgb(72, 192, 238);;
  padding: 50px 0;
}

footer p {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  margin: 10px;
}

nav.scrolled{
  margin: auto;
  max-width: 2560px;
  background:
    url("../img/footer3.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: inset  0 4px -5px 5px rgba(0,0,0,0.6);
}

.navbar-nav>li a {
  font-weight: 500;
}

a.btn i {
  font-weight: 600;
  margin-left: 5px;
  font-size: 22px;
}

.input_error {
  border-color: #ff3e3e !important;
}

input.input_success {
  background: #00C573 !important;
  border: #00c573 2px solid !important;
}

#features>img {
  display: none;
}

@media screen and (max-width: 1199px) {
  h2 {
    padding-top: 50px;
  }

  #features h4 {
    padding-top: 50px;
  }

  #apps .app_screenshot img {
    max-width: 200px;
  }
}

@media screen and (max-width: 990px) {
  h2 {
    font-size: 16px;
  }
  h1 {
    font-size: 26px;
  }
  a.btn.btn-default {
    font-size: 14px;
  }
  #features h4 {
    padding-top: 0px;
  }
  #features section {
    margin-bottom: 50px;
  }
  header img {
    width: 500px;
  }
}

@media screen and (max-width: 767px) {
  .events-content{
    height: 275px!important;
  }

  header {
    text-align: center;
  }

  .navbar-langue {
   padding-top: 30px;
  }
 
  a.btn.btn-default {
    margin-bottom: 20px;
  }

  ul.nav.navbar-nav.navbar-right {
    display: none;
  }

  a.navbar-brand {
    float: none;
  }

  .navbar-header.page-scroll {
    text-align: center;
    margin-top: 20px;
  }

  section h3 {
    font-size: 26px;
  }

  #features h4 {
    font-size: 18px;
  }

  #apps .app_screenshot img {
    margin-bottom: 20px;
  }

  #contact form div:first-of-type input {
    margin-bottom: 18px;
  }

  a.btn i {
    font-size: 18px;
  }

  section#features div img {
    max-width: 150px;
    margin-top: 50px;
  }

  header img {
    display: none;
  }

  header {
    padding-bottom: 40px;
  }

  #features>img {
    display: block;
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-bottom: 60px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
  }
  section#features{
    background-image: none;
  }
  section#whats_next{
    background-image: none;
  }
  .carousel-wrapper{
    display: none;
  }

  .whats_next_section {
    width: 280px;
    margin: auto;
    flex-direction: column;
  }

  .whats_next_section img {
    width: 120px;
    margin: auto;
    margin-top: 30px;
  }

  #last-section{
    flex-direction: column-reverse;
  }

  #whats_next p {
    margin: auto;
  }

  #whats_next h2{
    margin-top: -30px;
    padding-top: 0px;
    color: #243A4D;
    margin-bottom:30px ;
    font-weight: 400;
    margin-left: 0;
  }

  a.btn.btn-secondary {
    margin-top: 0;
    width: 100%;
  }
  a.btn.btn-secondary p{
    font-size: 12px;
  }
}
@media screen and (max-width: 1200px){
  #main {
    width: 100%;
    text-align: center;
  }
  .carousel-wrapper{
    display: none;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px){

  #main {
    width: 35%;
    margin-left: 25px;
  }
  .horizontal-carousel {
    width: 900px !important;
    height: 420px !important;
    top: 64% !important;
    left: 26%;
  }

}
@media screen and (min-width: 1200px) {
    .features-list-element {
      margin-left: 80px;
      margin-right: 80px;
    }
    .features-title{
      font-weight: 500;
      font-size: 40px;
      margin-bottom: 50px;
    }
    .next-title{
      font-weight: 500;
      font-size: 40px;
      margin-bottom: 50px;
      text-align: left;
    }
    section#features{
      background-position-x: 0%;
      background-position-y: 0%;
      background-size: cover;
      background-position: center center;
    }
    section#whats_next{
      background-position-x: 0%;
      background-position-y: 0%;
      background-size: cover;
      background-position: center center;
    }

    .whats_next_section{
      padding-left: 25px;
    }
}

/* ---- Timeline ---- */
/* --------------------------------

Main Components

-------------------------------- */
.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #fff;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(72, 192, 238,1);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  width:100px;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.3rem;
  padding-bottom: 15px;
  color: #383838;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  color:white;
  padding:5px;
  margin-bottom:20px;
}
/* custom*/
.cd-horizontal-timeline .events a::before {
  content: '';
  position: absolute;
  width:1px;
  height:20px;
  background: #fff;
  bottom:-20px;
  left:50%;
}

.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -25px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #fff;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: rgba(72, 192, 238,1);
  border-color: #fff;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: rgba(72, 192, 238,1);
  border-color: rgba(72, 192, 238,1);
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color:rgba(72, 192, 238,1);
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 6em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 62px;
  width: 10px;
  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%);
  background: url(../img/icones.svg) no-repeat 0 0;
  background-position: 0 23px;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
  color: #fff;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: rgba(72, 192, 238,1);
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -1px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: rgba(72, 192, 238,1);
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 {
  font-weight: bold;
  font-size: 3em !important;
  font-weight: 700;
  line-height: 1.2;
  padding-top: 0px;
}
.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
      color: rgba(118, 229, 238,1);
}
.cd-horizontal-timeline .events-content em::before {
  content: '- ';
}
.cd-horizontal-timeline .events-content p {
  font-size: 1.5em !important;
  color: #fff;
}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h2 {
    font-size: 7rem;
  }
  .cd-horizontal-timeline .events-content em {
    font-size: 1.5em !important;
  }
  .cd-horizontal-timeline .events-content p {
    font-size: 1.8rem;
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
/* carousel*/

/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
    overflow: hidden;
    width: 90%;
    margin: auto;
    padding: 4rem;
    margin-top: 50px;

  }

  /* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
  .carousel-wrapper * {
    box-sizing: border-box;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1000px;
    right: -70px;
    z-index: -1;
  }

  /* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
  .horizontal-carousel {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 525px;
    z-index: 1;
  }

  /* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
  .carousel__item {
    border-radius: 8px;
    opacity: 0;
    position: absolute;
    top:0;
    width: 70%;
    margin: auto 15%;
    z-index: 100;
    transition:transform 0.5s, opacity .2s;
    height: 100%;
    object-fit: cover;
  }

  /* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
  .carousel__item--active {
    opacity: 1;
    position: relative;
    z-index: 900;
    transform: scale(1);
  }

  /* Set 'z-index' to sit behind our '.active' item. */
  .carousel__item-prev,
  .carousel__item-next {
    z-index: 800;
    opacity: 0.7;
  }


  .carousel__item-next,
  .carousel__item-next-next {
      right: 0;
  }

  .carousel__item-prev,
  .carousel__item-prev-prev {
      left: 0;
  }

  /* Translate previous item to the left */
  .carousel__item-prev {
    transform: translate(-15%) scale(0.8);
  }

  /* Translate next item to the right */
  .carousel__item-next {
    transform: translate(15%) scale(0.8);
  }


  .carousel__item-prev-prev, .carousel__item-next-next {
      z-index: 600;
      opacity: 0.3;
  }

  .carousel__item-prev-prev {
    transform: translate(-30%) scale(0.6);
  }


  .carousel__item-next-next {
    transform: translate(30%) scale(0.6);
  }

  /* Style navigation buttons to sit in the middle, either side of the carousel. */
  .carousel__button-prev,
  .carousel__button-next {
    position: absolute;
    top:50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001; /* Sit on top of everything */
  /*  opacity: 0;  Hide buttons until carousel is initialised
    transition:opacity 1s;*/
  }

  .carousel__button-prev {
    left:175px;
  }

  .carousel__button-next {
    right:25px;
  }

  /* Use pseudo elements to insert arrows inside of navigation buttons */
  .carousel__button-prev::after,
  .carousel__button-next::after {
    content: " ";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    border-right: 8px solid rgba(255,255,255,0.7);
    border-bottom: 8px solid rgba(255,255,255,0.7);
    transform: translate(-50%, -50%) rotate(135deg);
  }

  .carousel__button-next::after {
    left: 47%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }


  /* NEW TIMELINE */
  /* dates */
  .horizontal-timeline .events a {
    color: #fff !important;
  }
  /* timeline back */
  .horizontal-timeline .events {
    background-color: #fff9 !important;
  }
  /* Point Timeline */
  .horizontal-timeline .events a::after {
    background-color: #fff !important;
  }
  .horizontal-timeline .filling-line {
    background-color: rgba(72, 192, 238,1) !important;
  }
  .horizontal-timeline .events a.older-event::after, .horizontal-timeline .events a.selected::after {
    background-color: rgba(72, 192, 238,1) !important;
  }
  .horizontal-timeline .events a.selected::after {
    background-color: rgba(72, 192, 238,1) !important;
  }
  .horizontal-timeline .events a.selected {
    color: rgba(72, 192, 238,1) !important;
    font-weight: 600;
  }
  .horizontal-timeline .events-content li {
    background: none !important;
    color: white;
  }
  .horizontal-timeline.loaded {
    height: 250px !important;
    top: calc(100% - 420px);
    position: relative;
  }
  .horizontal-timeline .timeline {
    width: 80%;
    user-select: none;
  }
  .events-content ol li em {
    display: block;
    font-style: italic;
    margin: 10px auto;
    color: rgba(118, 229, 238,1);
  }
  .timeline-navigation a {
    display: inline-block !important;
    padding-top: 4px;
    text-decoration: none;
  }
  .timeline-navigation a.inactive {
    color: #999 !important;
  }
  .timeline-navigation a:hover {
    border-color: white !important;
  }
  .timeline-navigation#leftNav, .timeline-navigation#rightNav {
    display: block !important;
    top: 2px !important;
    text-decoration: none !important;
  }
  .roundedChevron {
    font-size: 20px !important;
    color: #9FC6E5 !important;
    border: 2px solid white;
    border-radius: 30px;
    height: 30px;
    width: 30px;
    text-align: center;
    margin-top: 9px;
  }