import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap')

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}


@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

      :root {
        --blue: #38B6FF;
        --chip-image: url("https://lh5.googleusercontent.com/y58mIMZC-IwE41TNehTaXikfD26LtOLULH3BRTAnFxSB33UHwDwf5wVfVvwVwsju1uo=w2400");
        --whiteish-letters: #dafffd;
	--glitched-duration: 0.9s;
	--glitched-long-duration: 3s;
	--yellow-color: #f9f002;
	--yellow-color-opacity: #f9f00242;
	--orange-color: #ff9800;
	--border-color: #8ae66e;
	--red-color: #ff003c;
	--blue-color: #0c5f74;
	--green-color: #298d29;
	--purple-color: purple;
	--neon-color: #39ff14;
	--black-color: #000;
	--background-color: rgba(0, 0, 0, 0.4);

      }

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-family: 'IBM Plex Mono', sans-serif;
        color: white;
        font-size: 14px;
      }

      body {
        width: 100vw;
        height: 100vh;
      }

      main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
	.neon {
		visibility: hidden;
		position: absolute;
		left: 30vw;
		top: 15vh;
		font-family: "Rubik", sans-serif;
		--c: #1dd3b01a;
		color: #ffffffa0;
		font-size: 2rem;
		letter-spacing: 0.5rem;
		text-shadow: 5px 5px var(--c), 10px 10px var(--c), 15px 15px var(--c), 20px 20px var(--c), 40px 40px 15px var(--c);
		border: 5px solid #1dd3b060;
		border-radius: 1rem;
		padding: 1rem 4rem 3rem;

		animation: plop 5s infinite ease-in-out alternate;
	}
      .menu {
	position:absolute;
        width: 220px;
	left:2vw;
      }

	h1 {
		font-size: 1.6vw;
		font-weight: bold;
		margin: 5px 5px -15px 5px;
    		position: relative;
    		padding-bottom: 15px;
	}

	h2 {
		font-size: 1.4vw;
		font-weight: bold;
		margin: 5px 5px 5px 5px;
    		position: relative;
    		padding-bottom: 15px;
	}

	h3 {
		font-size: 1.2vw;
		font-weight: bold;
		margin: 5px 5px 5px 5px;
    		position: relative;
    		padding-bottom: 15px;
	}

	h4 {
		font-size: 1vw;
		font-weight: bold;
		margin: 5px 5px 5px 5px;
    		position: relative;
    		padding-bottom: 15px;
	}

	h1.cybercloud, h2.cybercloud, h3.cybercloud, h4.cybercloud,  h1.cybercloud,  h2.cybercloud,  h3.cybercloud,  h4.cybercloud {
	    color: rgb(193 98 54);
	}

	h1.cybercloud:before, h2.cybercloud:before, h3.cybercloud:before, h4.cybercloud:before,  h1.cybercloud:before,  h2.cybercloud:before,  h3.cybercloud:before,  h4.cybercloud:before {
	    content: "";
	    display: block;
	    position: absolute;
	    bottom: 0px;
	    left: 2px;
	    width: 100%;
	    height: 10px;
	    background-color: rgb(193 98 54);
	    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
	}

      .nousrencontrerimg {
	position: absolute;
	right: 10px;
     }

	img:hover {
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	}


      .imgnousrencontrer {
	right: 10px;
	height: 42vh;
	width: 26vw;
	position: absolute;
	object-fit: contain;
	border-radius: 4px;
     }

      .nousrencontrertxt {
	justify-content: center;
	position: absolute;
	left: 25vw;
	height: 50vh;
	width: 45vw;
	background-color: var(--background-color);
	overflow: hidden;
	border-radius: 4px;
	display: grid;
     }

	.center-hori {
		display: block;
		margin-left: auto;
		margin-right: auto;
		height: fit-content;
		width: fit-content;
	}

      .nousrencontrertxt a {
	margin: 5px 25px 5px 25px;
	font-size: 1.1vw;
	overflow: auto;
	}


      .centertxt {
	justify-content: center;
	position: absolute;
	left: 20vw;
	height: 65vh;
	width: 75vw;
	background-color: var(--background-color);
	border-radius: 4px;
	overflow: auto;
     }


      .smallcentertxt {
	justify-content: center;
	position: absolute;
	left: 20vw;
	height: 65vh;
	width: 45vw;
	background-color: var(--background-color);
	border-radius: 4px;
	overflow: auto;
     }

      .centertxt img, .smallcentertxt img,
	.centertxt video, .smallcentertxt video {
		height: auto;
		width: 65%;
		object-fit: contain;
		display: block;
		margin-left: auto;
		margin-right: auto;
		border-radius: 6px;
	}

      .mentionstxt a, .centertxt a, .smallcentertxt a {
	position: relative;
	left: 15px;
	margin: 5px 25px 5px 25px;
	font-size: 1.1vw;
	overflow: auto;
	}

      .centertxt li, .smallcentertxt li {
	position: relative;
	left: 35px;
	margin: 5px 25px 5px 25px;
	font-size: 1.1vw;
	overflow: auto;
	}

      .mentionstxt {
	justify-content: center;
	position: absolute;
	left: 20vw;
	height: 65vh;
	width: 75vw;
	background-color: var(--background-color);
	overflow: auto;
	border-radius: 4px;
	display: grid;
     }

      .article-video {
	background-color: var(--background-color);
	overflow: auto;
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	position: absolute;
	overflow: hidden;
	left: 21.5vw;
	height: 65vh;
	width: 55vw;
	z-index: 100;
     }

	.article-video video {
	display: block;
	margin: auto;
	height: auto;
	width: auto;
	max-width: 95%;
	max-height: 90%;
	min-width: 30%;
	min-height: 30%;
	border-radius: 6px;
        box-shadow: 0 0 10px var(--black-color);
	overflow: hidden;
	}

	.article-video-text {
	z-index: 110;
	position: absolute;
	top: 51vh;
	left: 26.5vw;
        box-shadow: 0 0 10px var(--black-color);
	overflow: auto;
	height: 25vh;
	width: 45vw;
	border-radius: 6px;
	background: rgb(0 0 0 / 0.4);
	}

	.article-video-text a {
		font-size: 1vw;
	}

      .scene {
	margin-top: 85px;
	position:absolute;
	left:25vw;
        width: 500px;
        height: 500px;
        perspective: 1800px;
      }


      .top-banner {
        width: 100vw;
        height: 20vh;
	justify-content: center;
	align-items: center;
      }

      .middle-banner {
        width: 100vw;
        height: 70vh;
	position: absolute;
	top: 150px;
      }

      .bottom-banner {
        width: 100vw;
        height: 10vh;
	background-color: #1f213d;
	display: grid;
	text-decoration: none; 
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0px;
      }

      .bottom-banner a {
	text-decoration: none;
	font-size: 12px;
	}

      .bottom-banner i {
	text-decoration: none;
	font-size: 20px;
	}

      .bottom-banner a:link:hover {
	text-decoration: underline;
	}

      .cube {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style:preserve-3d;
        transform: translateZ(-250px);
        transition: transform 0.8s;
      }

      .cube.show-front {
        transform: translateZ(-250px) rotateY(0deg);
      }
      .cube.show-right {
        transform: translateZ(-250px) rotateY(-90deg);
      }
      .cube.show-back {
        transform: translateZ(-250px) rotateY(-180deg);
      }
      .cube.show-left {
        transform: translateZ(-250px) rotateY(90deg);
      }
      .cube.show-top {
        transform: translateZ(-250px) rotateX(-90deg);
      }
      .cube.show-bottom {
        transform: translateZ(-250px) rotateX(90deg);
      }

      .df.fd-c {
        display: flex;
        flex-direction: column;
      }
      .df.fd-r {
        display: flex;
        flex-direction: row;
      }

      .cube-face {
        position: absolute;
        width: 500px;
        height: 500px;
        padding: 40px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background-color: rgba(0,0,0,0.8);
        background-image:var(--chip-image);
        background-size: contain;
        background-repeat: no-repeat;
      }

      .cube-face-front {
        transform: rotateY(0deg) translateZ(250px);

      }

      .intro-wrapper {
        margin-bottom: 20px;
      }

      .image {
        border-radius: 50%;
        overflow: hidden;
        width: 140px;
        height: 140px;
        border: 1px dashed var(--blue);
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .image-wrapper {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        overflow: hidden;
      }

      img {
        width: 100%;
        height: 110px;
        object-fit:cover;
      }

      .intro {
        width: 70%;
      }

      .intro-heading {
        font-size: 1.6em;
        font-family: 'IBM Plex Mono', monospace;
        width: 100%;
        color: var(--whiteish-letters);
        padding-bottom: 20px;
        line-height: 3rem;
      }

      .intro-heading>span {
        font-size: inherit;
        font-family: inherit;
        color: var(--blue);
      }

      .intro-text {
        color: var(--whiteish-letters);
        width: 90%;
        padding: 5px 0;
      }

      .buttons>button {
        color: var(--whiteish-letters);
        border: 2px solid var(--blue);
        background-color: transparent;
        padding: 5px 5px;
        margin: 5px;
        box-shadow: 0 0 10px var(--blue);
        transition: box-shadow 0.3s;
      }

      button:hover, a.button:hover {
        cursor: pointer;
        box-shadow: 0 0 15px var(--blue);
        background-color: var(--blue);
      }

      .cube-face-back {
        transform: rotateY(180deg) translateZ(250px);
      }
      .work-edu-section {
        margin-bottom: 40px;
      }
      .work-edu-heading {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.5rem;
        padding-bottom: 10px;
        font-weight: 400;
      }
      .work-edu-heading>i {
        font-size: 1.2rem;
        color: var(--blue);
      }
      .work-edu-heading.date {
        color: var(--blue);
      }
      .work-edu-info {
        width: 70%;
        margin-left: 20px;
      }
      .work-edu-info>ul {
        margin-left: 20px;
      }
      .work-edu-heading.company {
        width: 100%;
      }

      .cube-face-right {
        transform: rotateY(90deg) translateZ(250px);
      }

      .cube-face-left {
        transform: rotateY(-90deg) translateZ(250px);
      }

      .cube-face-top {
        transform: rotateX(90deg) translateZ(250px);
      }
      .cube-face-bottom {
        transform: rotateX(-90deg) translateZ(250px);
      }
      .social-media-btns {
        margin-top: 10px;
        margin-bottom: 40px;
      }
      .social-media-btns>i {
        font-size: 2rem;
        margin: 5px 10px;
      }
      .social-media-btns>i:hover {
        cursor: pointer;
        color: var(--blue);
      }

      .projects {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
      }
      .project-border {
        width: 110px;
        height: 110px;
        background-image: url("https://lh5.googleusercontent.com/zgccmEHip1xVXgGhdxVPYB6skDCyHX5LpfqmHHw09nbybd9en_GQdBxOlUlXFSnURks=w2400");
        background-size: contain;
        background-repeat: no-repeat;

        display:flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
      }
      .project-wrapper {
        width: 80px;
        height: 80px;
      }

      .visit-wrapper {
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .project-border:nth-of-type(1)>.project-wrapper {
        background-image: url("https://media.istockphoto.com/id/1277822133/photo/futuristic-scifi-battle-ships-hover-over-an-alien-planet.jpg?s=612x612&w=0&k=20&c=JSZtYp2TtvE19LWxOV1mhgfpvZX6Y-jxlC-KRwYi6cs=");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .project-border:nth-of-type(2)>.project-wrapper {
        background-image: url("https://www.e-booksdirectory.com/categoryimg/448.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .project-border:nth-of-type(3)>.project-wrapper {
        background-image: url("https://www.e-booksdirectory.com/categoryimg/448.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .project-border:nth-of-type(4)>.project-wrapper {
        background-image: url("https://reviewedwords.com/wp-content/uploads/2020/03/science-fiction-2907434_1280.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .project-border:nth-of-type(5)>.project-wrapper {
        background-image: url("https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/c/i/n/cinematography-mass-effectromeda-wallpaper-daf81.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
      .project-border:nth-of-type(6)>.project-wrapper {
        background-image: url("https://cdnb.artstation.com/p/assets/images/images/012/219/935/large/gaetan-toussaint-b2a2-toussaint-g-envi.jpg?1533666111");
        background-size: cover;
        background-repeat: no-repeat;
      }

      .app-title {
        background-color: rgba(0,0,0,0.7);
        padding: 3px 7px;
        margin-bottom: 10px;
	font-size:13px;
      }

      .visit-app {
        background-color: rgba(0,0,0,0.7);
        padding: 5px 5px;
      }
      .visit-app:hover {
        text-decoration: underline;
      }

      .visit-app,
      .visit-app>i {
        font-size: 1rem;
      }

      .visit-app>i {
        color: var(--blue);
      }
      .certificate-section {
        width: 80%;
        justify-content: start;
        align-items: center;
        margin-left: 15px;
        margin-bottom: 10px;
      }

      .cube-face-left > div:nth-last-of-type(2) {
        margin-bottom: 20px;
      }

      .certificate-date {
        font-size: 1.2rem;
        color: var(--blue);
      }
      .certificate-heading {
        font-size: 1rem;
        margin-left: 20px;
      }

	button.btn,
	a.btn, a.button, button.btn {
	  --background-color: #ff003c;
	  background-color: var(--background-color);
	  display: block;
	  border: none;
	  border-radius: 0%;
	  font-size: 0.8rem;
	  line-height: 10%;
	  letter-spacing: 2px;
	  text-transform: uppercase;
	  font-weight: 600;
	  font-family: "Advent Pro", arial;
	  padding: 25px 5px;
	  margin: 10px;
	  position: relative;
	  color: #fff;
	  border-right: 3px solid #8ae66e;
	  clip-path: polygon(
	    -15px 0%,
	    calc(100% + 15px) 0%,
	    calc(100% + 15px) 100%,
	    20px 100%,
	    -15px calc(100% - 35px)
	  );
	  cursor: pointer;
	  outline: none;
	}

	button.btn:hover,
	a.btn:hover,
	button.btn:focus,
	a.button.btn:focus,
	a.btn:focus {
	  animation-name: hover;
	  animation-duration: var(--glitched-duration);
	  animation-iteration-count: infinite;
	  animation-timing-function: linear; 
	}
	
	button.btn.green,
	a.btn.green {
	  font-family: "Advent Pro", arial;
	  --background-color: #446d44;
	}
	
	button.btn.purple,
	a.btn.purple {
	  font-family: "Advent Pro", arial;
	  --background-color: purple;
	}
	
	button.btn.blue,
	a.btn.blue {
	  font-family: "Advent Pro", arial;
	  --background-color: #136377;
	}
	
	button.btn.blue.accueil:after {
	  content: "R-00";
	}
	
	button.btn.blue.partenaires:after {
	  content: "R-11";
	}
	
	button.btn.blue.essayeznous:after {
	  content: "R-22";
	}
	
	button.btn.blue.news:after {
	  content: "R-33";
	}
	
	button.btn.blue.apropos:after {
	  content: "R-44";
	}
	
	button.btn.blue.contacts:after {
	  content: "R-55";
	}
	
	button.btn.blue.notrecybercloud:after {
	  content: "R-45";
	}
	
	button.btn.blue.microservices:after {
	  content: "R-46";
	}
	
	button.btn.blue.saas:after {
	  content: "R-47";
	}
	
	button.btn.blue.nousrencontrer:after {
	  content: "R-56";
	}
	
	button.btn.blue.news:after {
	  content: "R-57";
	}
	
	button.btn.blue.maintenant:after {
	  content: "R-66";
	}
	
	button.btn.blue.demain:after {
	  content: "R-67";
	}
	
	button.btn:after,
	a.btn:after {
	  display: block;
	  position: absolute;
	  bottom: 0px;
	  right: 25px;
	  padding: 2px 2px 0px 2px;
	  font-size: 0.6rem;
	  line-height: 9px;
	  color: #000;
	  background-color: #f9f002;
	  border-left: 2px solid #8ae66e;
	}
	
	button.btn:hover:after,
	a.btn:hover:after,
	button.btn:focus:after,
	a.btn:focus:after {
	  animation-name: hoverafter;
	  animation-duration: var(--glitched-duration);
	  animation-iteration-count: infinite;
	  animation-timing-function: linear;
	}
	
	button.btn:before,
	a.btn:before {
	  --outside: 4px;
	  content: "";
	  position: absolute;
	  display: none;
	  background-color: var(--background-color);
	  width: calc(100% + (var(--outside) * 2));
	  height: 12px;
	  top: 0px;
	  left: calc(0px - 1px - var(--outside));
	  border-left: 2px solid #8ae66e;
	  border-right: 2px solid #8ae66e;
	}
	
	button.btn:hover:before,
	a.btn:hover:before,
	button.btn:focus:before,
	a.btn:focus:before {
	  display: block;
	  animation-name: hoverbefore;
	  animation-duration: var(--glitched-duration);
	  animation-iteration-count: infinite;
	  animation-timing-function: linear;
	}
	
	@keyframes liglitched {
	  0% {
	    transform: skew(-3deg);
	    margin-left: -2px;
	  }
	  10% {
	    transform: skew(3deg);
	    margin-left: inherit;
	  }
	  11% {
	    transform: skew(0deg);
	    margin-left: 2px;
	  }
	  50% {
	    transform: skew(0deg);
	    margin-left: inherit;
	  }
	  51% {
	    transform: skew(3deg);
	    margin-left: 5px;
	  }
	  59% {
	    transform: skew(-3deg);
	    margin-left: 5px;
	  }
	  60% {
	    transform: skew(0deg);
	    margin-left: inherit;
	  }
	  100% {
	    transform: skew(0deg);
	  }
	}
	
	@keyframes plop {
		0% {
			transform: skew(-25deg);
		}
		100% {
			text-shadow: -5px 5px var(--c), -10px 10px var(--c), -15px 15px var(--c), -20px 20px var(--c), -40px 40px 15px var(--c);
			transform: skew(25deg);
		}
	}
	
	@keyframes hover {
	  0% {
	    transform: skew(0deg);
	  }
	  60% {
	    transform: skew(0deg);
	  }
	  61% {
	    transform: skew(10deg);
	  }
	  70% {
	    transform: skew(10deg);
	  }
	  71% {
	    transform: skew(0deg);
	  }
	  100% {
	    transform: skew(0deg);
	  }
	}
	
	@keyframes hoverbefore {
	  0% {
	    display: none;
	    top: 0px;
	  }
	  10% {
	    display: none;
	    top: 0px;
	  }
	  11% {
	    display: block;
	    top: 10px;
	    left: calc(0px - 0px - var(--outside));
	  }
	  29% {
	    top: 10px;
	  }
	  30% {
	    display: none;
	    top: 0px;
	  }
	  50% {
	    display: none;
	    top: 0px;
	  }
	  51% {
	    display: block;
	    top: 55px;
	    filter: blur(1px);
	    height: 22px;
	  }
	  90% {
	    display: block;
	    top: 55px;
	    height: 22px;
	  }
	  91% {
	    filter: blur(0px);
	    display: none;
	    top: 0px;
	    height: 12px;
	  }
	  100% {
	    display: none;
	    top: 0px;
	  }
	}
	
	@keyframes hoverafter {
	  0% {
	    right: 45px;
	  }
	
	  10% {
	    right: 45px;
	  }
	  11% {
	    right: 35px;
	  }
	  20% {
	    transform: skew(0deg);
	  }
	  21% {
	    transform: skew(-10deg);
	  }
	  40% {
	    transform: skew(-10deg);
	  }
	  41% {
	    transform: skew(0deg);
	  }
	  49% {
	    right: 35px;
	  }
	  50% {
	    right: 55px;
	  }
	
	  60% {
	    right: 55px;
	  }
	  61% {
	    right: 35px;
	  }
	  70% {
	    transform: skew(0deg);
	  }
	  71% {
	    transform: skew(10deg);
	  }
	  80% {
	    transform: skew(10deg);
	  }
	  81% {
	    transform: skew(0deg);
	  }
	  100% {
	    right: 35px;
	  }
	}
	
	
	@keyframes initText{
	  0% {content:"Initializing system . . ." }
	  17% {content:"Initializing system . . . \00000a Loading core modules . . ." }
	  27% {content:"Initializing system . . . \00000a Loading core modules . . . \00000a Verifying user permissions . . . " }
	  36% {content:"Initializing system . . . \00000a Loading core modules . . . \00000a Verifying user permissions . . . \00000a Compiling source code . . . " }
	  42% {content:"Initializing system . . . \00000a Loading core modules . . . \00000a Verifying user permissions . . . \00000a Compiling source code . . . \00000a Running diagnostics . . ." }
	  49% {content:"Loading core modules . . . \00000a Verifying user permissions . . . \00000a Compiling source code . . . \00000a Running diagnostics . . . \00000a Establishing secure connection . . ." }
	  60% {content:"Verifying user permissions . . . \00000a Compiling source code . . . \00000a Running diagnostics . . . \00000a Establishing secure connection . . . \00000a Scanning for vulnerabilities . . ." }
	  66% {content:"Compiling source code . . . \00000a Running diagnostics . . . \00000a Establishing secure connection . . . \00000a Scanning for vulnerabilities . . . \00000a Loading user interface . . . \00000a" }
	  78% {content:"Running diagnostics . . . \00000a Establishing secure connection . . . \00000a Scanning for vulnerabilities . . . \00000a Loading user interface . . . \00000a Executing startup procedures . . . \00000a" }
	  85% {content:"Establishing secure connection . . . \00000a Scanning for vulnerabilities . . . \00000a Loading user interface . . . \00000a Executing startup procedures . . . \00000a Initializing database connections . . . \00000a"   }
	  100% {content:"\00000a Scanning for vulnerabilities . . . \00000a Loading user interface . . . \00000a Executing startup procedures . . . \00000a Initializing database connections . . . \00000aUp and Running !"   }
	}
	
	@keyframes opcty{
	  0% { opacity:0 }
	  100% { opacity:1 }
	}
	
	@keyframes counting{
	    0% { --num: 0 }
	    60% { --num: 66 }
	    100% { --num: 100 }
	}
	
	@keyframes charging {
	  0%{ width:0% }
	  60%{ width:66% }
	  100%{ width:100% }
	}
	
	@keyframes rotate{
	  0%{
	    transform: rotate(0)
	  }
	  100%{
	    transform: rotate(360deg)
	  }
	}
	.flex{
	  display:flex;
	}
	
	body{
	  background-color: #000;
	  color: white;
	  overflow:hidden;
	  height:100%;
	}
	
	.container{
	  display:flex;
	  height:90vh;
	  width:50vw;
	  flex:1;
	  align-items:center;
	  justify-content:center;
	}
	
	#loader{
	  position:absolute;
	  left:65vw;
	  visibility:visible;
	  display:flex;
	  flex-direction:column;
	  width:30%;
	  animation: opcty 0.8s  ease-in-out;
	    
	  .loading-text{
	    font-family:'Orbitron';
	    letter-spacing:0.3rem;
	  }
	  
	  .therefore{
	    font-size:24px;
	    animation:rotate 0.8s linear infinite;
	    padding-top:9.5px;
	    height:fit;
	  }
	  .loading-number{
	    counter-reset: num var(--num);
	    margin-left:auto;
	    transition: --num 5s;
	    animation: counting 0.8s  ease-in-out;
	    font-family:'Orbitron';
	    animation-fill-mode: forwards;
	    
	    &:before{
	    font-family:'Orbitron';
	    content: counter(num);
	    }
	  }
	}
	
	
	#loading-bar-border{
	  display:flex;
	  align-items:center;
	  padding:3px;
	  border-radius:3px;
	  border-top:1px solid rgba(255,255,255,.5);
	  border-bottom:1px solid rgba(255,255,255,.5);
	  width:100%;
	  
	  & .loading-bar{
	    height:.6rem;
	    margin:1px 0px;
	    background:white;
	    animation:charging 0.8s  ease-in-out;
	    animation-fill-mode: forwards;
	    
	  }
	}
	
	#warning{
	  margin-top:.5rem;
	  font-family:'Orbitron';
	  display:flex;
	  height:1.2rem;
	  
	  .exclamation{
	    width:1rem;
	    display:flex;
	    justify-content:center;
	    background-color:white;
	    color:black;
	    border-radius:3px;
	  }
	}
	
	
	#line-cascates{
	  margin-left:auto;
	  display:flex;
	  align-items:end;
	  margin-top:5rem;
	  &:after{
	    height:5rem;
	    font-size:12px;
	    white-space: pre;
	    text-align:end;
	    color:#b5b5b5;
	    content:"";
	    animation: initText 0.8s ease;
	    animation-fill-mode: forwards;
	  }
	}
	
	#rectangle-front {
	        position: absolute;
	        width: 362.4px;
	        height: 545px;
	        padding: 40px;
		left:70vw;
		visibility:hidden;
	        display:flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
		border-radius: 6px;
	        background-color: rgba(0,0,0,0.4);
	        background-image:var(--rectangle-image);
	        background-size: contain;
	        background-repeat: no-repeat;
	}
	
	#rectangle-back {
	        position: absolute;
	        width: 362.4px;
	        height: 545px;
	        padding: 40px;
		left:70vw;
		visibility:hidden;
	        display:flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	
		border-radius: 6px;
	        background-color: rgba(0,0,0,0.4);
	        background-image:var(--rectangle-image);
	        background-size: contain;
	        background-repeat: no-repeat;
	}
	
	#rectangle-right {
	        position: absolute;
	        width: 362.4px;
	        height: 545px;
	        padding: 40px;
		left:70vw;
		visibility:hidden;
	        display:flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	
		border-radius: 6px;
	        background-color: rgba(0,0,0,0.4);
	        background-image:var(--rectangle-image);
	        background-size: contain;
	        background-repeat: no-repeat;
	}
	
	#rectangle-left {
	        position: absolute;
	        width: 362.4px;
	        height: 545px;
	        padding: 40px;
		left:70vw;
		visibility:hidden;
	        display:flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	
		border-radius: 6px;
	        background-color: rgba(0,0,0,0.4);
	        background-image:var(--rectangle-image);
	        background-size: contain;
	        background-repeat: no-repeat;
	}
	
	#rectangle-top {
	        position: absolute;
	        width: 362.4px;
	        height: 545px;
	        padding: 40px;
		left:70vw;
		visibility:hidden;
	        display:flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	
		border-radius: 6px;
	        background-color: rgba(0,0,0,0.4);
	        background-image:var(--rectangle-image);
	        background-size: contain;
	        background-repeat: no-repeat;
	}
	
	#rectangle-bottom {
	        position: absolute;
	        width: 362.4px;
	        height: 545px;
	        padding: 40px;
		left:70vw;
		visibility:hidden;
	        display:flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	
		border-radius: 6px;
	        background-color: rgba(0,0,0,0.4);
	        background-image:var(--rectangle-image);
	        background-size: contain;
	        background-repeat: no-repeat;
	}
	
	#topbannernousrencontrer {
		position: absolute;
		top: 25px;
		left: 35vw;;
		height: 20vh;
		z-index: 0;
		border-radius: 4px;
	}
	
	#background-video {
		height: 100vh;
		width: 105vw;
		object-fit: cover;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
	
	.glitched {
		animation-duration: 1.35s;
		animation-iteration-count: infinite;
		animation-name: liglitched;
		animation-timing-function: ease-in-out;
		list-style-image: none;
		list-style-position: outside;
		list-style-type: none;
		--glitched-duration: 0.9s;
		--glitched-long-duration: 3s;
	}
	
	textarea.cybercontact {
	  fill: #fff;
	  color: #000;
	  width: 74vw;
	  border: 20px solid #136377;
	  border-left: 5px solid #136377;
	  border-right: 5px solid #136377;
	  border-bottom: 10px solid #136377;
	  clip-path: polygon(
	    0px 20px,
	    20px 0px,
	    calc(60% - 25px) 0px,
	    60% 25px,
	    100% 25px,
	    100% calc(100% - 10px),
	    calc(100% - 15px) calc(100% - 10px),
	    calc(80% - 10px) calc(100% - 10px),
	    calc(80% - 15px) calc(100% - 0px),
	    10px calc(100% - 0px),
	    0% calc(100% - 10px)
	  );
	  margin-bottom: 10px;
	  padding: 12px;
	}
	
	input.cyberpunk,
	textarea.cyberpunk {
	  fill: #fff;
	  color: #000;
	  width: 300px;
	  border: 20px solid #136377;
	  border-left: 5px solid #136377;
	  border-right: 5px solid #136377;
	  border-bottom: 10px solid #136377;
	  clip-path: polygon(
	    0px 20px,
	    20px 0px,
	    calc(60% - 25px) 0px,
	    60% 25px,
	    100% 25px,
	    100% calc(100% - 10px),
	    calc(100% - 15px) calc(100% - 10px),
	    calc(80% - 10px) calc(100% - 10px),
	    calc(80% - 15px) calc(100% - 0px),
	    10px calc(100% - 0px),
	    0% calc(100% - 10px)
	  );
	  margin-bottom: 10px;
	  padding: 12px;
	}
	
	textarea.cyberpunk {
		height: 80px;
	}
	
	button.cyberpunkblue,
	input[type=submit].cyberpunkblue, 
	a.cyberpunkblue{
	  --text: "R-25";
	  --background-color: var(--blue-color);
	  --border-color: #8ae66e;
	  width: 270px;
	  height: 70px;
	  display: block;
	  border: none;
	  border-radius: 0%;
	  align-items: center;
	  justify-content: center;
	  font-size: 1.5rem;
	  line-height: 1.5rem;
	  letter-spacing: 2px;
	  text-transform: uppercase;
	  font-weight: 600;
	  padding: 15px 25px;
	  margin-left: auto;
	  margin-top: 20px;
	  margin-right: auto;
	  margin-bottom: 0px;
	  position: relative;
	  color: #fff;
	  border-right: 3px solid var(--border-color);
	  clip-path: polygon(
	    -15px 0%,
	    calc(100% + 15px) 0%,
	    calc(100% + 15px) 100%,
	    20px 100%,
	    -15px calc(100% - 35px)
	  );
	  cursor: pointer;
	  background-color: var(--background-color);
	  outline: none;
	  display: inline-block;
	}
	
	button.cyberpunk,
	input[type=submit].cyberpunk, 
	a.cyberpunk {
	  --text: "R-25";
	  --background-color: var(--red-color);
	  width: 270px;
	  height: 70px;
	  display: block;
	  border: none;
	  border-radius: 0%;
	  align-items: center;
	  justify-content: center;
	  font-size: 1.5rem;
	  line-height: 1.5rem;
	  letter-spacing: 2px;
	  text-transform: uppercase;
	  font-weight: 600;
	  padding: 15px 25px;
	  margin: 10px 20px 10px 0px;
	  position: relative;
	  color: #fff;
	  border-right: 3px solid var(--border-color);
	  clip-path: polygon(
	    -15px 0%,
	    calc(100% + 15px) 0%,
	    calc(100% + 15px) 100%,
	    20px 100%,
	    -15px calc(100% - 35px)
	  );
	  cursor: pointer;
	  background-color: var(--background-color);
	  outline: none;
	  display: inline-block;
	}
	
	.cybermenu {
	font-family: "Advent Pro", arial;
	text-decoration: none; 
	font-size: 0.8rem;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	}
	
	.footer-top {
	display: flex;
		font-size: 0.4vw;
		font-family: Averta-Bold, sans-serif;
	}
	
	.footer-bot {
	display: flex;
	justify-content: center;
	}
	
	.footer-contact {
	display: grid;
	margin: 5px 55px 5px 55px;
	} 
	
	.footer-legal-mentions {
	display: flex;
	margin: 5px 55px 5px 55px;
	} 
	
	.footer-legal-mentions a {
	text-decoration: none;
	}
	
	.footer-produits {
	display: grid;
	margin: 5px 55px 5px 55px;
	}
	
	.footer-services {
	display: grid;
	margin: 5px 55px 5px 55px;
	}
	
	.footer-rs {
	display:flex;
	margin: 5px 55px 5px 55px;
	}
	
	.footer-rs a {
	margin: 5px 25px 5px 25px;
	}
	
	.strawpoll-embed {
	position: absolute;
	top:20vh;
	right: 0px;
	}
	
	.half-size {
		flex: 0.5;
	}
	
	.call_to_action {
		display: flex;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
		justify-content: center;
	}
	
	.centertxt > div.container-catalogue {
	    --w1: 1200px;
	    --n: 6;
	    --w2: 800px;
	    --m: 4;
	    --w3: 400px;
	    --p: 2;
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(clamp(clamp(clamp(100% /(var(--n) + 1) + 0.1%,(var(--w1) - 100%)* 1000, 100% /(var(--m) + 1) + 0.1%),(var(--w2) - 100%)* 1000, 100% /(var(--p) + 1) + 0.1%),(var(--w3) - 100%)* 1000, 100%), 1fr));
	    gap: 70px;
	    overflow: auto;
	    border-radius: 6px;
	}
	
	.centertxt > div.container-catalogue > div {
	    width: 220px;
	    font-size: 20px;
	    text-align: center;
	    border-radius: 4px;
	    box-shadow: 0 15px 35px rgba(0, 0, 0, 9);
	    border-radius: 6px;
	}
	
	.centertxt > div.container-catalogue img {
	    height: 150px;
	    width: 150px;
	    object-fit: contain;
	    border-radius: 6px;
	}
	
	.centertxt > div.good_job {
		display: flex;
		border-radius: 4px;
	}
	
	.centertxt > div.good-job img {
		display: flex;
		height: 250px;
		width: 250px;
		border-radius: 4px;
	}
	
	.retour-news {
		position: relative;
		top: 55vh;
		z-index: 1002;
		margin-left: auto;
		margin-right: auto;
		height: fit-content;
		width: fit-content;
		display: block;
	}
	
	.contagree:hover, .contdisagree:hover {
		cursor:pointer;
	}
	
	.menu-button {
		visibility: hidden;
	}

@media all and (orientation: portrait) {

body {
	height: 2400px;
	width: 100vw;
	display: grid;
        flex-direction: column;
	justify-content: center;
	overflow: auto;
}

main {
	height: 2400px;
	width: 100vw;
	display: grid;
        flex-direction: column;
	justify-content: center;
	align-items: center;
}

.scene {
	order: 1;
	height: 500px;
	width: 500px;
	position:relative;
	perspective: 1800px;
	margin-top: 200px;
	margin-bottom: 15px;
	left: 0px;
}

.container{
	order: 2;
	height: 700px;
	width: 500px;
	position: relative;
	align-items: center;
	padding-bottom: 200px;
}

.menu {
	order: 3;
	width: 600px;
	position: fixed;
	top: 60vh;
	left: calc(50vw - 300px);
	z-index: 1099;
}

.perspective {
	position: relative;
	margin: 150px auto;
	perspective: 500px;
	-webkit-perspective: 500px; /* Chrome, Safari, Opera */
	width: 81.13px; 
	height: 100px;
}

.menu-button {
	visibility: visible;
	
	height: 80px;
	width: 80px;
	
	cursor: pointer;
	border-radius: 30px;

	text-align: center;
	color: #fff;
	
	background: #4270EA;
	box-shadow: 0 8px #264BAC, 0 60px 25px rgba(66, 112, 234, .99);
	
	padding-top: 22px;
	padding-left: 22px;

	-webkit-transform: rotateY(40deg);
	-moz-transform: rotateY(40deg);
	-o-transform: rotateY(40deg);
	-ms-transform: rotateY(40deg);
	transform: rotateX(40deg);

	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.menu-button.change {
	visibility: visible;
	-webkit-transform: rotateY(10deg);
	-moz-transform: rotateY(10deg);
	-o-transform: rotateY(10deg);
	-ms-transform: rotateY(10deg);
	transform: rotateX(10deg);
	box-shadow: 0 3px #264BAC, 0 160px 89px rgba(66, 112, 234, .75);
	top: -1px;
}

.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.4s;
}

.change .bar1 {transform: translate(0, 11px) rotate(-45deg);}

.change .bar2 {opacity: 0;}

.change .bar3 {transform: translate(0, -11px) rotate(45deg);}

.btn {
	visibility: hidden;
}

.bottom-banner {
	height: 10vh;
	align-items: end;
}

#rectangle-front {
	position: absolute;
	left: 68.5px;
}

#rectangle-back {
	position: absolute;
	left: 68.5px;
}

#rectangle-left {
	position: absolute;
	left: 68.5px;
}

#rectangle-right {
	position: absolute;
	left: 68.5px;
}

#rectangle-top {
	position: absolute;
	left: 68.5px;
}

#rectangle-bottom {
	position: absolute;
	left: 68.5px;
}

#loader {
	order: 2;
	width: 50vw;
	position: absolute;
	left: 0;
}

button.btn.blue.accueil.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 66vh;
	left: calc(50% - 250px);
}

button.btn.blue.partenaires.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 73vh;
	left: calc(50% - 250px);
}

button.btn.blue.essayeznous.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 80vh;
	left: calc(50% - 250px);
}

button.btn.blue.news.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 66vh;
	left: calc(50% + 50px);
}

button.btn.blue.apropos.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 73vh;
	left: calc(50% + 50px);
}

button.btn.blue.contacts.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 80vh;
	left: calc(50% + 50px);
}
/**/
button.btn.blue.saas.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 59vh;
	left: calc(50% - 250px);
}

button.btn.blue.nousrencontrer.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 59vh;
	left: calc(50% + 50px);
}

button.btn.blue.notrecybercloud.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 73vh;
	left: calc(50% - 250px);
}

button.btn.blue.microservices.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 73vh;
	left: calc(50% + 50px);
}

button.btn.blue.maintenant.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 80vh;
	left: calc(50% - 250px);
}

button.btn.blue.demain.change {
	visibility: visible;
	position: fixed;
	width: 187px;
	top: 80vh;
	left: calc(50% + 50px);
}

.strawpoll-embed {
	position: absolute;
	top:3500px;
	right:calc(50%+150px);
}

.middle-banner {
	width: 100vw;
	height: 2000px;
	position: absolute;
	top: 50px;
}

.bottom-banner {
	position: absolute;
	top:2322px;
	bottom: inherit;;
}

.centertxt {
	height: 1500px;
}

}