:root {
    --color1: #D89584;
    --color2: #F4F4F4;
    --color3: #F2E3C6;
}
.navbar a {
    color: rgb(34, 35, 59);
}
.navbar {
    background-color: #0a101d1f;
}

.cont {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /*height: 100vh;*/
    background-image: -webkit-linear-gradient(right top, #F2E3C6 0%, #A7A1A5 100%);
    background-image: linear-gradient(to left bottom, #F2E3C6 0%, #A7A1A5 100%);
    overflow: visible;
    margin-top: 90px;
  }

  .app {
    position: relative;
    min-width: 1050px;
    height: 540px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }
  .app__bgimg {
    position: absolute;
    top: 0;
    left: -2.5%;
    width: 105%;
    height: 100%;
    -webkit-transition: -webkit-transform 3.5s 770ms;
    transition: -webkit-transform 3.5s 770ms;
    transition: transform 3.5s 770ms;
    transition: transform 3.5s 770ms, -webkit-transform 3.5s 770ms;
  }
  .app__bgimg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .app__bgimg-image--1 {
    background: url("/images/programming.webp") center center no-repeat;
    background-size: cover;
  }
  .app__bgimg-image--2 {
    background: url("/images/Young-economist-or-financial-439583.webp") center center no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-transition: opacity 0ms 1300ms;
    transition: opacity 0ms 1300ms;
    will-change: opacity;
  }
  .app__text {
    position: absolute;
    right: 165px;
    top: 150px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    z-index: 1;
  }
  .app__text-line {
    -webkit-transition: opacity 750ms 500ms, -webkit-transform 1500ms 400ms;
    transition: opacity 750ms 500ms, -webkit-transform 1500ms 400ms;
    transition: transform 1500ms 400ms, opacity 750ms 500ms;
    transition: transform 1500ms 400ms, opacity 750ms 500ms, -webkit-transform 1500ms 400ms;
    will-change: transform, opacity;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .app__text-line--4 {
    -webkit-transition: opacity 1500ms 1500ms, -webkit-transform 1500ms 1500ms;
    transition: opacity 1500ms 1500ms, -webkit-transform 1500ms 1500ms;
    transition: transform 1500ms 1500ms, opacity 1500ms 1500ms;
    transition: transform 1500ms 1500ms, opacity 1500ms 1500ms, -webkit-transform 1500ms 1500ms;
  }
  .app__text-line--3 {
    -webkit-transition: opacity 1500ms 1750ms, -webkit-transform 1500ms 1600ms;
    transition: opacity 1500ms 1750ms, -webkit-transform 1500ms 1600ms;
    transition: transform 1500ms 1600ms, opacity 1500ms 1750ms;
    transition: transform 1500ms 1600ms, opacity 1500ms 1750ms, -webkit-transform 1500ms 1600ms;
  }
  .app__text-line--2 {
    -webkit-transition: opacity 1500ms 2000ms, -webkit-transform 1500ms 1700ms;
    transition: opacity 1500ms 2000ms, -webkit-transform 1500ms 1700ms;
    transition: transform 1500ms 1700ms, opacity 1500ms 2000ms;
    transition: transform 1500ms 1700ms, opacity 1500ms 2000ms, -webkit-transform 1500ms 1700ms;
  }
  .app__text-line--1 {
    -webkit-transition: opacity 1500ms 2250ms, -webkit-transform 1500ms 1800ms;
    transition: opacity 1500ms 2250ms, -webkit-transform 1500ms 1800ms;
    transition: transform 1500ms 1800ms, opacity 1500ms 2250ms;
    transition: transform 1500ms 1800ms, opacity 1500ms 2250ms, -webkit-transform 1500ms 1800ms;
  }
  .app__text-line--4 {
    font-size: 50px;
    font-weight: 700;
    color: #0A101D;
  }
  .app__text-line--3 {
    font-size: 40px;
    font-weight: 300;
  }
  .app__text-line--2 {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #0099CC;
  }
  .app__text-line--1 {
    margin-top: 15px;
  }
  .app__text-line--1 img {
    width: 50px;
  }
  .app__text--1 .app__text-line {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    opacity: 0;
  }
  .app__text--2 {
    right: initial;
    top: 250px;
    left: 80px;
    z-index: -1;
    -webkit-transition: z-index 1500ms;
    transition: z-index 1500ms;
  }
  .app__text--2 .app__text-line--4 {
    opacity: 0;
    -webkit-transition: opacity 400ms 125ms, -webkit-transform 1500ms -75ms;
    transition: opacity 400ms 125ms, -webkit-transform 1500ms -75ms;
    transition: transform 1500ms -75ms, opacity 400ms 125ms;
    transition: transform 1500ms -75ms, opacity 400ms 125ms, -webkit-transform 1500ms -75ms;
  }
  .app__text--2 .app__text-line--3 {
    opacity: 0;
    -webkit-transition: opacity 400ms 200ms, -webkit-transform 1500ms 0ms;
    transition: opacity 400ms 200ms, -webkit-transform 1500ms 0ms;
    transition: transform 1500ms 0ms, opacity 400ms 200ms;
    transition: transform 1500ms 0ms, opacity 400ms 200ms, -webkit-transform 1500ms 0ms;
  }
  .app__text--2 .app__text-line--2 {
    opacity: 0;
    -webkit-transition: opacity 400ms 275ms, -webkit-transform 1500ms 75ms;
    transition: opacity 400ms 275ms, -webkit-transform 1500ms 75ms;
    transition: transform 1500ms 75ms, opacity 400ms 275ms;
    transition: transform 1500ms 75ms, opacity 400ms 275ms, -webkit-transform 1500ms 75ms;
  }
  .app__text--2 .app__text-line--1 {
    opacity: 0;
    -webkit-transition: opacity 400ms 350ms, -webkit-transform 1500ms 150ms;
    transition: opacity 400ms 350ms, -webkit-transform 1500ms 150ms;
    transition: transform 1500ms 150ms, opacity 400ms 350ms;
    transition: transform 1500ms 150ms, opacity 400ms 350ms, -webkit-transform 1500ms 150ms;
  }
  .app__img {
    position: absolute;
    -webkit-transform: translate3d(0, -750px, 0);
            transform: translate3d(0, -750px, 0);
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02), -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    will-change: transform;
  }
  .app__img img {
    min-width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  .initial .app__img {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  .initial .app__text--1 .app__text-line--1 {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 400ms 1600ms, -webkit-transform 1500ms 1400ms;
    transition: opacity 400ms 1600ms, -webkit-transform 1500ms 1400ms;
    transition: transform 1500ms 1400ms, opacity 400ms 1600ms;
    transition: transform 1500ms 1400ms, opacity 400ms 1600ms, -webkit-transform 1500ms 1400ms;
    opacity: 1;
  }
  .initial .app__text--1 .app__text-line--2 {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 400ms 1675ms, -webkit-transform 1500ms 1475ms;
    transition: opacity 400ms 1675ms, -webkit-transform 1500ms 1475ms;
    transition: transform 1500ms 1475ms, opacity 400ms 1675ms;
    transition: transform 1500ms 1475ms, opacity 400ms 1675ms, -webkit-transform 1500ms 1475ms;
    opacity: 1;
  }
  .initial .app__text--1 .app__text-line--3 {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 400ms 1750ms, -webkit-transform 1500ms 1550ms;
    transition: opacity 400ms 1750ms, -webkit-transform 1500ms 1550ms;
    transition: transform 1500ms 1550ms, opacity 400ms 1750ms;
    transition: transform 1500ms 1550ms, opacity 400ms 1750ms, -webkit-transform 1500ms 1550ms;
    opacity: 1;
  }
  .initial .app__text--1 .app__text-line--4 {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 400ms 1825ms, -webkit-transform 1500ms 1625ms;
    transition: opacity 400ms 1825ms, -webkit-transform 1500ms 1625ms;
    transition: transform 1500ms 1625ms, opacity 400ms 1825ms;
    transition: transform 1500ms 1625ms, opacity 400ms 1825ms, -webkit-transform 1500ms 1625ms;
    opacity: 1;
  }
  
  .active .app__bgimg {
    -webkit-transform: translate3d(10px, 0, 0) scale(1.05);
            transform: translate3d(10px, 0, 0) scale(1.05);
    -webkit-transition: -webkit-transform 5s 850ms ease-in-out;
    transition: -webkit-transform 5s 850ms ease-in-out;
    transition: transform 5s 850ms ease-in-out;
    transition: transform 5s 850ms ease-in-out, -webkit-transform 5s 850ms ease-in-out;
  }
  .active .app__bgimg .app__bgimg-image--2 {
    opacity: 1;
    -webkit-transition: opacity 0ms 1500ms;
    transition: opacity 0ms 1500ms;
  }
  .active .app__img {
    -webkit-transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transition: -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02), -webkit-transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    -webkit-transform: translate3d(0, -1210px, 0);
            transform: translate3d(0, -1210px, 0);
  }
  .active .app__text--1 {
    z-index: -1;
    -webkit-transition: z-index 0ms 1500ms;
    transition: z-index 0ms 1500ms;
  }
  .active .app__text--1 .app__text-line--1 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 400ms 500ms, -webkit-transform 1500ms 300ms;
    transition: opacity 400ms 500ms, -webkit-transform 1500ms 300ms;
    transition: transform 1500ms 300ms, opacity 400ms 500ms;
    transition: transform 1500ms 300ms, opacity 400ms 500ms, -webkit-transform 1500ms 300ms;
    opacity: 0;
  }
  .active .app__text--1 .app__text-line--2 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 400ms 575ms, -webkit-transform 1500ms 375ms;
    transition: opacity 400ms 575ms, -webkit-transform 1500ms 375ms;
    transition: transform 1500ms 375ms, opacity 400ms 575ms;
    transition: transform 1500ms 375ms, opacity 400ms 575ms, -webkit-transform 1500ms 375ms;
    opacity: 0;
  }
  .active .app__text--1 .app__text-line--3 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 400ms 650ms, -webkit-transform 1500ms 450ms;
    transition: opacity 400ms 650ms, -webkit-transform 1500ms 450ms;
    transition: transform 1500ms 450ms, opacity 400ms 650ms;
    transition: transform 1500ms 450ms, opacity 400ms 650ms, -webkit-transform 1500ms 450ms;
    opacity: 0;
  }
  .active .app__text--1 .app__text-line--4 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 400ms 725ms, -webkit-transform 1500ms 525ms;
    transition: opacity 400ms 725ms, -webkit-transform 1500ms 525ms;
    transition: transform 1500ms 525ms, opacity 400ms 725ms;
    transition: transform 1500ms 525ms, opacity 400ms 725ms, -webkit-transform 1500ms 525ms;
    opacity: 0;
  }
  .active .app__text--2 {
    z-index: 1;
  }
  .active .app__text--2 .app__text-line--1 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 1300ms 1300ms, -webkit-transform 2500ms 1100ms;
    transition: opacity 1300ms 1300ms, -webkit-transform 2500ms 1100ms;
    transition: transform 2500ms 1100ms, opacity 1300ms 1300ms;
    transition: transform 2500ms 1100ms, opacity 1300ms 1300ms, -webkit-transform 2500ms 1100ms;
    opacity: 1;
  }
  .active .app__text--2 .app__text-line--2 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 1300ms 1575ms, -webkit-transform 2500ms 1175ms;
    transition: opacity 1300ms 1575ms, -webkit-transform 2500ms 1175ms;
    transition: transform 2500ms 1175ms, opacity 1300ms 1575ms;
    transition: transform 2500ms 1175ms, opacity 1300ms 1575ms, -webkit-transform 2500ms 1175ms;
    opacity: 1;
  }
  .active .app__text--2 .app__text-line--3 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 1300ms 1850ms, -webkit-transform 2500ms 1250ms;
    transition: opacity 1300ms 1850ms, -webkit-transform 2500ms 1250ms;
    transition: transform 2500ms 1250ms, opacity 1300ms 1850ms;
    transition: transform 2500ms 1250ms, opacity 1300ms 1850ms, -webkit-transform 2500ms 1250ms;
    opacity: 1;
  }
  .active .app__text--2 .app__text-line--4 {
    -webkit-transform: translate3d(0, -125px, 0);
            transform: translate3d(0, -125px, 0);
    -webkit-transition: opacity 1300ms 2125ms, -webkit-transform 2500ms 1325ms;
    transition: opacity 1300ms 2125ms, -webkit-transform 2500ms 1325ms;
    transition: transform 2500ms 1325ms, opacity 1300ms 2125ms;
    transition: transform 2500ms 1325ms, opacity 1300ms 2125ms, -webkit-transform 2500ms 1325ms;
    opacity: 1;
  }
  
  .mouse {
    position: relative;
    margin-right: 20px;
    min-width: 50px;
    height: 80px;
    border-radius: 30px;
    border: 5px solid rgba(255, 255, 255, 0.8);
  }
  .confiance {
    background-color: #f9f9f9;
    padding: 50px 0;
  }
  
  .container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
  }
  
  .confiance h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
  }

  .logos {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logos img {
    max-width: 300px;
    height: auto;
    margin: 0 20px;
  }
  
  .mouse:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-animation: scroll 1s infinite alternate;
            animation: scroll 1s infinite alternate;
  }
  @-webkit-keyframes scroll {
    100% {
      -webkit-transform: translate(-50%, 15px);
              transform: translate(-50%, 15px);
    }
  }
  @keyframes scroll {
    100% {
      -webkit-transform: translate(-50%, 15px);
              transform: translate(-50%, 15px);
    }
  }
  .pages {
    margin-left: 20px;
  }
  .pages__list {
    list-style-type: none;
  }
  .pages__item {
    position: relative;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #fff;
    cursor: pointer;
  }
  .pages__item:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0, 0);
            transform: translate(-50%, -50%) scale(0, 0);
    width: 75%;
    height: 75%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: 500ms;
    transition: 500ms;
  }
  .pages__item:hover:after {
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
            transform: translate(-50%, -50%) scale(1, 1);
    opacity: 1;
  }
  
  .page__item-active:after {
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
            transform: translate(-50%, -50%) scale(1, 1);
    opacity: 1;
  }
  
  .icon-link {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 50px;
  }
  .icon-link img {
    width: 100%;
    vertical-align: top;
  }
  .icon-link--twitter {
    left: auto;
    right: 5px;
  }
  
  .section {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 30px;
    overflow: auto;

}
 .section h1{
    text-align: center;
 }
div.section-grise2 {
    background: url(triangle1white.svg) no-repeat center top/100%;
    background-color: var(--color2);
    padding-top: 30px;
    padding-bottom: 20px;
}
.col-portfolio {
    width: 100%;
    padding-top: 15px;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: auto;
    margin-right: auto;
} 
.col-portfolio img {
    width: 30%;
    max-width: 27px;
    height: auto;
}
div.frame {
    margin: 30px 50px;
    padding: 20px 30px;
    background-color: white;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);

}
td{
  width: 10%;
}
thead {
  font-size: 2em;
  
}
thead td{
  padding-top: 20px;
  padding-left: 20px;
  text-align: center;
}
thead td:nth-child(1){
  padding-left: 0px;
}
td img{
  float: left;
}
tbody td{
  padding-left: 20px;
  text-align: justify;
  
}
tbody td:nth-child(1){
  padding-left: 0px;
 
}
@media screen and (max-width: 900px) {
    
  
     
 }