@import url('https://fonts.googleapis.com/css?family=Overpass:200,300,400,600,700,800&display=swap');

/*********************Base**********************/


body {
  --color-text: #171B23;
  --color-bg: #FFFFFF;
  
  --color-accents: #AF8D5B;
  --color-accents: #FF4E00;
  --color-accents: #005cff;
    
  --color-pale:rgba(150,160,170, .6);
  --color-pale-pale:#F2F5F9;
  --color-pale-pale-hover:rgba(215, 226, 244, 1);

  color: var(--color-text);
  background: var(--color-bg);
  font-size: 1.2vw;
  line-height: 1.6;
  cursor: context-menu;
  font-family: Overpass;
  font-weight: 200;
}

.bg-init,
.animsition-overlay-slide {
  background-color: var(--color-accents);
}

h1 {
  color: var(--color-text);
  font-size: 3.5vw;
  line-height: 4vw;
}

h2 {
  color: var(--color-accents);
  font-size: 1.8vw;
  line-height: 2.4vw;
}

p {
  margin-top: 10px;
}

a {
  color: var(--color-accents);
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  color: var(--color-accents);
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    z-index:1;
}

::-webkit-scrollbar:vertical {
    width: 15px;
}

::-webkit-scrollbar:horizontal {
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: var(--color-pale-pale);
}

/*********************Menu**********************/

.liens-titre{
  display:block;
  position:absolute;
  top:35px;
  left:130px;
  z-index: 1;
  padding-top:5px;
}

.liens-titre a{
  color:var(--color-text);
  font-size: 2vw;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.liens-titre a:hover{
  margin-left:10px;
}

.liens-social{
  display:block;
  position:absolute;
  top:50px;
  right:45px;
  z-index: 2;
}

.liens-social a{
  display:inline-block;
  padding:5px 0;
  margin:0 15px;
  display: inline;
  position: relative;
  color:var(--color-text);
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.liens-social a:hover{
}

.liens-social a:after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  width: 0;
  bottom: 0px;
  background: var(--color-text);
  height:1.2px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.liens-social a:hover:after {
  left: 0;
  right: auto;
  width: 100%;
}

#menuToggle {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 3;
  -webkit-user-select: none;
  user-select: none;
  width: 40px;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 35px;
  height: 2px;
  margin-bottom: 7px;
  position: relative;
  background: var(--color-text);
  z-index: 1;
  transform-origin: 6px -2px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
  opacity: 1;
  background: var(--color-bg);
  transform: rotate(45deg) translate(-2px, -1px);
}

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: fixed;
  width: calc(100vw - 0px);
  height: calc(100vh);
  padding-top: 0px;
  margin: -76px 0 0 -50px;
  background: var(--color-text);
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.8s;
}

#menu-nav {
  margin: 0 auto;
  margin-top:calc(50vh - 16vw);
  width: 30vw;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

#menu-nav a {
  display: block;
  color: var(--color-bg);
  text-align: center;
  font-size: 6vw;
  line-height: 8vw;
  letter-spacing: 1px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

#menu-nav:hover a {
  color:var(--color-pale);
}

#menu-nav a:hover {
  color:var(--color-bg);
}

#menu-nav span{
  position:absolute;
  display:inline;
  font-size: 2vw;
  line-height: 7vw;
  color: var(--color-pale);
  margin-left: 5px
}

#menu-social {
  display:block;
  bottom:20vh;
  margin-left:calc(50% - 155px);
  position:absolute;
}

#menu-social a {
  display:inline;
  color: var(--color-pale);
  padding:5px 0;
  margin:0 10px;
  position: relative;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

#menu-social a:after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  width: 0;
  bottom: 0px;
  background: var(--color-bg);
  height: 1.3px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

#menu-social a:hover:after {
  left: 0;
  right: auto;
  width: 100%;
}

#menu-social a:hover {
  color: var(--color-bg);
}

#menuToggle input:checked~div {
  transform: none;
}

/*********************Accueil**********************/

/*********************
Header
**********************/

.header {
  width: 100%;
  height: 100vh;
  min-height: 400px;
  position: relative;
}

/*********************
Main
**********************/

.inline{
    display: inline-block;
}

.inline img{
  width:6vw;
}

.hand-container {
  transform-origin: 80% 100%;
}

.hand-container.wave {
  animation: move 4s infinite ease-in-out;
}

.hand {
  display: inline-block;
  transform-origin: 80% 100%;
}
.hand.wave {
  animation: wave 4s infinite linear;
}

@keyframes wave {
  0%, 60%, 100% {
    transform: rotate(17deg);
  }
  7.5%, 22.5%, 37.5%, 52.5% {
    transform: rotate(54deg);
  }
  15%, 30%, 45% {
    transform: rotate(24deg);
  }
  3.75%, 18.75%, 33.75%, 48.75% {
    transform: rotate(27deg);
  }
  11.25%, 26.25%, 41.25%, 56.25% {
    transform: rotate(51deg);
  }
}
@keyframes move {
  0%, 60%, 100% {
    transform: translateX(0);
  }
  5.625%, 20.625%, 35.625%, 50.625% {
    transform: translateX(8px);
  }
  13.125%, 28.125%, 43.125% {
    transform: translateX(-8px);
  }
}

/*********************
Typewriter
**********************/

.titre-accueil {
  font-size: 7vw;
  line-height: 8vw;
  color: var(--color-text);
  position: absolute;
  top: 23vh;
  left:130px;
  margin: 0 auto;
  z-index: 1;
  text-align: left;
}

.sous-titre-web{
    position:absolute;
    display:block;
    width:10vw;
    top: calc(23vh + 18vw);
    left: calc(130px + 51vw);
    z-index: 1;
    background: var(--color-accents);
    border-radius: 100px;
    -webkit-animation: rotate 8s infinite linear;
}

.sous-titre-web img{
  width:88%;
  margin:6%;
}

.sous-titre-web:hover{
    animation-play-state: paused;
}

#cursor {
  background: var(--color-text);
  display: inline-block;
  margin-bottom: -5px;
  margin-left: 10px;
  width: 2.5px;
  height: 100px;
  opacity: 0;
  -webkit-animation: blink 0.8s 5;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

/*********************
Indicateur de scroll
**********************/

.arrow-scroll{
    width:30px;
    position:absolute;
    left:120px;
    -webkit-animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  0% {bottom:75px;}
  70% {bottom:100px;}
  100% {bottom:75px;}
}

/*********************outils**********************/

.container{
  margin:0 0 100px 140px;
  padding:0 0 0 0;
  display:block;
  align-items: top;
  text-align: left;
  width:calc(100vw - 300px);
  min-height:100px;
}

.titre-gauche {
  margin:0px 0 0px 0;
  width: 45%;
  display: inline-block;
  margin-right:9%;
}

.block-services{
  width:105%;
  display: block;
  vertical-align: top;
   margin: 200px 0px 250px 0px;
}

.block-service{
  display:inline-block;
  width:28%;
  margin:0 4.9% 0px 0;
  vertical-align: top;
}

.block-service a{
  cursor: context-menu;
}

.block-service svg {
  fill: var(--color-accents);
  width: 30px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin: 0px 7px -3px 0px;
}

.block-service span{
  opacity:.4;
  color:var(--color-text);
  font-weight:300;
  font-size: 16px;
  line-height: 26px;
  display: block;
  margin:15px 0 15px 0px;
  max-width: 300px;
}

.block{
  padding:150px 70px 150px 140px;
}

.block h1{
  margin:0px 0px 100px 0px;
}

ul.a {
  text-indent:-12px;
  margin-left:20px;
  margin-top:15px;
}

.a li:before{
  content: "➜";
  font-size: 10px;
  opacity:.2;
  display: inline-block;
  margin:0px 10px 0 0;
}

.hover-reveal {
	position: fixed;
	width: 250px;
	height: 200px;
	top: 0;
	left:0;
	pointer-events: none;
	opacity: 0;
    z-index:1;
}

.hover-reveal__inner,
.hover-reveal__img {
	width: 100%;
	height: 100%;
	position: relative;
}

.hover-reveal__img {
	background-size: cover;
	background-position: 50% 50%;
}

.ligne{
    height:1px;
    display:block;
    background: var(--color-text);
}

.ligne-claire{
    height:1.2px;
    display:block;
    background: var(--color-accents);
    margin:0px 0 15px 0;
}

.lien-droite {
  width: 45%;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  text-align: right;
}

.lien-droite a {
  color: var(--color-accents);
  padding: 18px 25px 15px 25px;
  border-radius: 30px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  border:1px solid var(--color-accents);
}

.lien-droite img{
  display: inline;
  width:15px;
  margin: 0 0 0 5px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.lien-droite a:hover img {
    transform: translate(5px);
}

.histoire{
  width:50%;
  margin:50px 0 60px 0;
}

.histoire h2{
  color:var(--color-text);
  margin:0px 0px 25px 0px;
}

.article{
  margin:0px 0px 50px 0;
}

a.moreless-button{
  color: var(--color-accents);
  padding: 18px 25px 15px 25px;
  border-radius: 30px;
  border:1px solid var(--color-accents);
}

.moretext {
  display: none;
}

.mobile{
    display:none;
}

.couleur{
    background: var(--color-pale-pale);
}

.couleur, .couleur h1{
    color:var(--color-text);
}

.couleur svg, .couleur h2{
    color:var(--color-accents);
    fill: var(--color-accents);
}

.block-chiffres{
    width:100%;
    padding:0px 0px;
    margin: 150px 0px;
}

.block-chiffres h1, .block-chiffres{
    color:var(--color-accents);
}

.block-chiffre{
    display:inline-block;
    text-align: center;
    vertical-align: top;
    width:24%;
    padding:5% 5%;
    min-height:37%;
    margin:0px;
    border-right:1px solid var(--color-accents);
}

.block-chiffres a{
  cursor: context-menu;
}

.margin{
    margin:0 0 0px 0;
}

quote {
    display:block;
    color:var(--color-accents);
}

.link-underline{
    color:var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

.link-underline:hover{
    color:var(--color-accents);
    border-bottom: 1px solid var(--color-accents);
}

.etape{
    width:30px;
    margin-bottom:-5px;
    margin-right:5px;
}

/*********************Carroussel**********************/

.slide-pane, .infinite-scroller {
    visibility: hidden;
}

.slide-wrap {
    height: auto;
    width: 100%;
    position: relative;
}

.slide-wrap .slide-data {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    min-height: 600px;
}

.slide-wrap .slide-data ul {
    margin: 0;
    padding: 0;
    position: relative;
}

.slide-wrap .slide-data ul li {
    margin: 0;
    padding: 0;
    position: absolute;
    list-style-type: none;
}

#carroussel img{
	max-width:600px;
	margin:10px 50px 0 50px;
    border-radius: 0px;
    box-shadow: 30px 40px 40px rgba(41, 44, 61, 0);
    transition-duration: 0.2s;
}

#carroussel a:hover img{
  transition-timing-function: ease-out;
  box-shadow: 30px 35px 40px rgba(41, 44, 61, .2);
  margin-top:0px
}

.carroussel-rond{
  width:125px;
  height:125px;
  background:var(--color-accents);
  position: relative;
  top:-600;
  left:150px;
    margin:-30px;
  display:block;
  border-radius: 100px;
  -webkit-animation: rotate 8s infinite linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(359deg);}
}

.carroussel-rond:hover{
  animation-play-state: paused;
}

.carroussel-rond img{
    width:85%;
    position:absolute;
    top:7.5%;
    left:7.5%;
}

.carroussel-sous-titre{
  width:calc(100% - 100px);
    margin:20px 0 0 50px;
}

.carroussel-sous-titre h2, .carroussel-sous-titre span{
  color: var(--color-text);
  padding:0;
  margin:0;
  line-height:35px;
  display:inline-block
}

.carroussel-sous-titre span::before{
  content: "";
  display: inline-block;
  height:1.5px;
  width: 30px;
  background:var(--color-text);
  margin:0 10px 7px 10px;
}

/*********************Portfolio**********************/

.filters {
  width: 45%;
  display: inline-block;
  margin: 0px 0px 100px 0px;
  line-height: 50px;
  max-width: 450px;
}

.filters a {
  color: var(--color-accents);
  padding: 9px 20px 7px 20px;
  margin:0 5px 0 0;
  border: 1px solid var(--color-accents);
  border-radius: 25px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.filters a:hover,
.filters a:focus {
  color: var(--color-bg);
  background: var(--color-accents);
  border: 1px solid var(--color-accents);
}

.filters .lien-logos{
  padding:0;
  border:1px solid var(--color-bg);
}

.filters .lien-logos img{
  width:15px;
  margin:0 0 0px 5px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.filters .lien-logos:hover, .filters .lien-logos:focus{
  color: var(--color-accents);
  background: var(--color-bg);
  border: 1px solid var(--color-bg);
}

.filters .lien-logos:hover img, .filters .lien-logos:focus img{
  margin:0 0 0px 10px;
}

.grid{
  margin-left:-9%;
  margin-bottom:-7%;
}

.item {
  width: 41%;
  margin:0 0% 9% 9%;
  display:inline-block;
  min-height:32vw;
}

.item-no-margin{
    margin: 0 0 9% 4%;
}

.item img {
  width: 100%;
  border-radius: 0px;
  transition-duration: 0.2s;
  box-shadow:0 3px 6px rgba(0,0,0,0), 0 3px 6px rgba(0,0,0,0);
}

.grid-hover{
  position:absolute;
  display:block;
  width:100%;
  height:auto;
  transform: translate(0px, 120%);
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  opacity:0;
}

.grid-hover h2, .grid-hover span{
  color: var(--color-text);
  padding:0;
  margin:0;
  line-height:25px;
  display:inline-block
}

.grid-hover span::before{
  content: "";
  display: inline-block;
  height:1.2px;
  width: 30px;
  background:var(--color-text);
  margin:0 10px 7px 10px;
}

.grid-hover-rond{
  width:70px;
  height:70px;
  background:var(--color-accents);
  position: absolute;
  display: table;
  bottom:15%;
  right:-0%;
  border-radius: 100px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  opacity:0;
  transform: translate(40px, 0%);
}

.grid-hover-rond::after{
  content: url('../files/arrow-white.svg');
  padding:35%;
  color:white;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.grid-hover-rond:hover{
  right:1%;
}

.item:hover .grid-hover{
  transform: translate(0px, 100%);
  opacity:1;
}

.item:hover .grid-hover-rond{
  opacity:1;
  transform: translate(20px, 0px);
}

.item:hover img{
  transition-timing-function: ease-out;
  box-shadow: 30px 40px 80px rgba(41, 44, 61, .3);
  margin-top:-10px
}

/*********************Projets**********************/

.projet-infos{
    width:45%;
    margin:100px 9% 0 0;
    display: inline-block;
}

.projet h2{
    color:var(--color-text)
}

.projet-infos .ligne-claire, .projet-block .ligne-claire{
    background:var(--color-text);
}

.credit{
}

.projet-info{
    width:100%;
}

.projet-info .ligne-claire{
    margin:25px 0;
}

.projet-description{
    width:45%;
    display: inline-block;
}

.projet img{
    max-width:100%;
    margin:100px 0;
}

img.img-no-margin{
  margin:0px 0 0 0;
}

.grille{
    display:inline;
    width:46%;
}

img.pair{
    float:right;
}

.projet .block-service h2{
    margin-bottom:20px;
}

.projet .block-service img{
    margin:0px 0 50px 0;
    max-height: 100px;
    display: block;
}

.branding{
    margin:150px 0 50px 0;
}

.palette-block{
    display: inline-block;
    width:19%;
    margin:0 5.5% 25px 0;
    font-size: 13px;
    color: var(--color-text);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.palette-couleur{
    height:75px;
    display:block;
    margin:0px 5% 5px 0;
}

.type-block{
    width:49%;
    display:inline-block;
    text-align: left;
    margin:100px 0px 0px 0px;
    font-size: 13px;
    color: var(--color-text);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.type-block img{
    width:80%;
    display:block;
    margin:0 0 10px 0;
}

.video{
    padding:56.25% 0 0 0;
    position:relative;
    margin:100px 0 100px 0;
}
    
.video iframe{
    position:absolute;
    top:0;
    left:0px;
    width:100%;
    height:100%;
}

.video-margin{
    padding:56.25% 0 0 0;
    position:relative;
    margin:100px 0 100px 0;
}

.video-margin iframe{
    position:absolute;
    top:0;
    left:0px;
    width:100%;
    height:100%;
}

.wireframes{
    margin:100px 0;
    margin-left:-4.6%;
}

.wireframes img{
    width:20%;
    margin:0 0 0 0;
    margin-left:4.6%;
    opacity: 0.8;
}

.detail{
    vertical-align: top;
    margin:25px 9% 0 0;  
}

.details{
    margin:25px 0 0 0;  
}

.pagination{
    margin:0px 0 50px 0;
    text-align:center;
}

.pagination a{
    display:inline-block;
    padding:10px 0;
    min-width:25px;
    margin:0 25px;
}

.pagination-svg {
    display:inline;
    width:25px;
    margin:0px 0px -5px 0px;
}


/*********************Footer**********************/

.footer{
  border-top:1px solid var(--color-accents);
  padding:50px 0 0 0;
}

.footer-block{
    display: inline-block;
    vertical-align: top;
    margin:0 0 0 0;
}

.footer-block.lien{
    float:right;
}

.footer-block.lien a{
  color: var(--color-bg);
  padding: 18px 25px 15px 25px;
  border-radius: 30px;
  border:1px solid var(--color-accents);
  background: var(--color-accents);
  margin:0 0 0 20px;
}

.footer-block.haut a img{
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  width:15px;
  margin:0 0 0 10px;
  transform: rotate(-90deg);
}

.footer-block.haut a:hover img{
  transform: rotate(-90deg) translate(5px);
}

.footer-block.lien a img{
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  width:15px;
  margin:0 0 0 10px;
}

.footer-block.lien a:hover img{
  transform: translate(5px);
}

.logo-grid{
    margin:0 0 0 -3%
}

.logo-grid img{
    display:inline-block;
    width:30%;
    margin:0 0 75px 3%;
}

/*********************Mobile**********************/

@media only screen and (max-width: 2000px) {
  #cursor {
    height: 80px;
  }}

@media only screen and (max-width: 1700px) {
body {
  font-size: 1.3vw;
  line-height: 1.8vw;
}

.liens-titre{
  top:45px;
}

.item {
  min-height:31vw;
}}

@media only screen and (max-width: 1300px) {
    
body {
  font-size: 17px;
  line-height: 25px;
}
    
#menu-social {
  margin-left:calc(50% - 130px);
}

h1 {
  font-size: 45px;
  line-height: 55px;
}
  
h2 {
  font-size: 23px;
  line-height: 30px;
}
    
#cursor {
  height: 50px;
}

.liens-social{
}
    
.liens-titre a{
  font-size: 26px;
}

.titre-gauche{
  width:auto;
  max-width:450px;
}
    
.filters {
  width: 100%;
  margin: 50px 0 50px 0;
  max-width: 100%;
  }

.block-services{
  margin: 100px 0 150px 0;
}

.grid-hover{
  opacity:1;
  transform: translate(0, 20px);
}

.block-chiffre{
    min-height:27.5%;
}
    
.item {
  width: 40%;
  margin:0 0% 9% 9%;
  min-height: 29vw;
}
    
.item:hover .grid-hover{
  transform: translate(0, 20px);
}

.type-block{
    margin:50px 0px 0px 0px;
}

.branding{
   margin:100px 0 0 0;
}
    
.logo-grid{
    margin:0 0 0 -4%;
}

.logo-grid img{
    display:inline-block;
    width:45%;
    margin:0 0 50px 4%;
}

.wireframes{
    margin:100px 0;
    margin-left:-4.6%;
}

.wireframes img{
    width:19.9%;
    margin:0 0 0 0;
    margin-left:4.6%;
}}

@media only screen and (max-width: 900px) { 

.header{
  height: 94vh;
}
    
.inline img{
  width:9vw;
}
    
.liens-social{
  display:none;
}

#menu-social {
  margin-left:calc(50% - 130px);
}
    
.container{
  margin-bottom:0;
}
    
.block-services{
  width:100%;
  display: inline-block;
  vertical-align: top;
  margin: 100px 0 50px 0;
}

.block-service{
  display:block;
  vertical-align: top;
  width:90%;
  max-width: none;
  min-width: 300px;
  margin:0 0 75px 0;
}
    
.ligne-claire{
    margin:0 0 10px 0;
}

.block-service p{
  margin-left:45px
}
    
.block p{
  margin-left:0px
}
    
.block ul{
  margin-left:25px
}
    
.histoire{
  width:100%;
}

.lien-droite {
  width: 100%;
  display: block;
  margin: 0px 0px 50px 0px;
  text-align: left;
}

.lien-droite a {
  margin:0 0 20px 0;
  display:block;
}
    
.lien-droite img{
  float:right;
  margin:6px 0px 0px 0px;
}

.block h1{
  margin:0px 0px 50px 0px;
}
  
.carroussel-mobile{
  display: grid;
  grid-gap: 8%;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  margin:0 0 100px 0px;
  padding:0 0 20px 0 ;
}
    
.carroussel-mobile::-webkit-scrollbar {
  display:none;
}
  
.carroussel-mobile li img{
  width:100%;
  margin:0 0 0 40px ;
  border-radius: 0px;
  box-shadow: 0 3px 6px rgba(0,0,0,0), 0 3px 6px rgba(0,0,0,0);
}
    
.test{
    width:29.5%;
}

.carroussel-rond{
  width:100px;
  height:100px;
  top:50px;
  left:0px;
  margin:0px;
}
    
.carroussel-rond:hover{
  width:100px;
  height:100px;
  top:50px;
  left:0px;
}

.item {
  width: calc(100% + 80px);
  margin:0 0 100px -40px;
  min-height:350px;
}
    
.item-no-margin{
  width: calc(100% + 80px);
  margin:0 0 100px -40px;
  min-height:350px;
}
    
.grid{
  margin-bottom:100px;
  margin-left:0;
}
    
.grid-hover{
  padding-left:40px;
}
    
.grid-hover-rond{
  opacity:1;
  transform: translate(-30px, 15px);
  width:50px;
  height:50px;
}

.item:hover .grid-hover-rond{
  transform: translate(-30px, 15px);
}
    
.grid-hover-rond::after{
  padding:30%;
}

.web{
    display:none;
}
    
.mobile{
    display:block;
}

.footer{
  border-top:1px solid var(--color-accents);
  padding:50px 0 0 0;
}

.footer-block{
    display: block;
    margin:0 0 30px 0;
}

.footer-block.lien{
    margin:40px 0 100px 0;
    float:left;
    width:100%;
}
    
.footer-block.haut{
    margin-top:-110px
}

.footer-block.lien a{
  display: block;
  margin:10px 0 0 0px;
   width: 100%
}

.footer-block.lien a img{
  float:right;
  margin-top:7px;
}

.block-chiffre{
    display:inline-block;
    text-align: center;
    vertical-align: top;
    width:48%;
    padding:3% 6%;
    min-height:25%;
    margin:0px;
    border-right:0px solid var(--color-accents);
}

.before-last, .last{
    margin-top:10%;
}
    
.projet{
    padding-bottom:100px;
}

.projet-infos{
    width:100%;
    margin:50px 0 0 0;
    display: block;
}

.projet-info{
    width:100%;
}

.projet-info .ligne{
    margin:25px 0;
}

.projet-description{
    width:100%;
    display:block;
    margin:75px 0 50px 0;
}

.projet img{
    max-width:calc(100% + 80px);
    margin:25px 0 25px -40px;
}
    
.grille{
    display:inline;
    width:46%;
}

    img.grille{
        margin:25px 0 25px 0px;
    }

img.pair{
    float:right;
}
    
.video{
    padding:56.25% 0 0 0;
    position:relative;
    margin:35px 0 75px -40px;
}
    
.video iframe{
    position:absolute;
    top:0;
    left:0px;
    width:calc(100% + 40px);
    height:calc(100% + 40px);
}
    
.video-margin{
    padding:56.25% 0 0 0;
    position:relative;
    margin:75px 0 125px -40px;
}

.video-margin iframe{
    position:absolute;
    top:0;
    left:0px;
    width:calc(100% + 40px);
    height:calc(100% + 40px);
}
    
.palette-block{
    width:44%;
    margin:0 0 25px 0;
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 15px;
}
    
.impair{
    margin-right:10%;
}

.palette-couleur{
    height:75px;
    display:block;
    margin:0px 5% 15px 0;
}
    
.type-block{
    width:100%;
    display:inline-block;
    text-align: left;
    margin:50px 0px 0px 0px;
    font-size: 13px;
    color: var(--color-text);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.type-block img{
    width:100%;
    display:block;
    margin:0 0 0px 0px;
    opacity:1;
}
    
img.img-regular{
    margin:0px 0 50px 0;
    max-height: 100px;
    display: block;
}
    
.projet-block{
    margin:50px 0;
}

.detail{
    vertical-align: top;
    margin:25px 0 0 0;  
}

.details{
    margin:25px 0 0 0;  
}

.projet .block-service{
    text-align: center;
    max-width: 80%;
    margin-left:5%;
    margin-top:50px;
    margin-bottom: 50px;
}

.projet .block-service h2{
    margin-bottom:15px;
}

.projet .block-service img{
    margin:0px auto 25px auto;
    max-height: 75px;
    display: block;
}

.hover-reveal__img {
	display: none;
}

quote {
    max-width: 80%;
}

.item:hover img{
  transition-timing-function: ease-out;
  box-shadow: 30px 40px 80px rgba(41, 44, 61, 0);
  margin-top:0px;
}

.pagination{
    margin:-50px 0 150px 0;
    text-align:center;
}

.pagination a{
    display:inline-block;
    padding:10px 0;
    min-width:25px;
    margin:0 25px;
}
    
.logo-grid{
    margin:0 0 150px 0;
}

.logo-grid img{
    display:inline-block;
    width:100%;
    margin:0 0 50px 0;
}

.wireframes{
    width:calc(100% + 120px);
    margin:50px 0;
    margin-left:calc(-9% - 40px);
}

.wireframes img{
    width:40%;
    margin:25px 0 25px 0;
    margin-left:9%;
}

.sous-titre{
    display:none;
}

.sous-titre-web{
    width:20vw;
    top: calc(23vh + 32vw);
    left: calc(130px + 36vw);
    border-radius: 100px;
}}

@media only screen and (max-width: 600px) {
    
.header{
  height: 92vh;
}
    
h1 {
  font-size: 8.5vw;
  line-height: 11vw;
}
    
.liens-titre{
  top:46px;
  left:110px;
}

#menuToggle {
  position: absolute;
}
    
#menu-nav {
  margin: 0 auto;
  margin-top:calc(50vh - 25vw);
  width: 40vw;
}
    
#menu-nav a{
  font-size: 8.5vw;
  line-height: 11vw;
}
    
#menu-nav span{
  font-size: 3vw;
  line-height: 8vw;
  margin-left: -5px
}
    
#cursor {
  height: 30px;
  margin-left:0px;
  margin-bottom:-2px;
} 

.titre-accueil {
  font-size: 8.5vw;
  line-height: 11vw;
  top: 30vh;
  left:50px;
}
    
.container{
  margin:0 0 0px 40px;
  text-align: left;
  width:calc(100vw - 80px);
}
    
.sous-titre-web{
   visibility: hidden;
}

.sous-titre{
    position:absolute;
    display:block;
    z-index: 1;
    right: 30px;
    bottom:12vh;
    opacity:0;
    -webkit-animation: appear 1s forwards;
    animation-timing-function: cubic-bezier(.2,.22,0,1.01);;
    animation-delay: 5.5s;
}
    
@-webkit-keyframes appear {
  0% {opacity:0;bottom:calc(12vh - 20px);}
  100% {opacity:1;bottom:12vh;}
}

.sous-titre a{
  color: var(--color-bg);
  background: var(--color-accents);
  padding: 18px 25px 15px 25px;
  border-radius: 30px;
  border:1px solid var(--color-accents);
}
 
.arrow-scroll{
    width:20px;
    position:absolute;
    left:40px;
    -webkit-animation: bounce 2s infinite;
}
    
@-webkit-keyframes bounce {
  0% {bottom:calc(12vh - 20px);}
  70% {bottom:12vh;}
  100% {bottom:calc(12vh - 20px);}
}
    
.filters {
  margin: 50px 0 50px 0;
  line-height: 43px;
  }
    
.filters a {
  margin:0 1px 0 0;
}
    
.block-services{
  width:100%;
  display: block;
  vertical-align: top;
  margin-bottom: 100px;
}

.ligne-claire{
  margin:0 0 10px 0;
}
    
.block-service{
  display:inline-block;
  vertical-align: top;
  width:100%;
  max-width: none;
  margin:0 0 75px 0;
}
    
.block-service p{
  max-width: 350px;
}
    
.block{
  padding:100px 0 100px 40px;
}
    
.block p, .block ul{
  width:80%;
}

.carroussel-mobile{
  margin:0 0 150px 0px;
}

.carroussel-rond{
  left:40px;
}
     
.carroussel-rond:hover{
  width:100px;
  height:100px;
  left:40px;
}

.video{
    padding:56.25% 0 0 0;
    position:relative;
    margin:25px 0 65px -40px;
}
    
.video iframe{
    position:absolute;
    top:0;
    left:0px;
    width:calc(100% + 40px);
    height:calc(100% + 40px);
}
    
.video-margin{
    padding:56.25% 0 0 0;
    position:relative;
    margin:70px 0 115px -40px;
}

.video-margin iframe{
    position:absolute;
    top:0;
    left:0px;
    width:calc(100% + 40px);
    height:calc(100% + 40px);
}

.branding{
    margin:100px 0 75px 0;
}

.wireframes{
    width:calc(100% + 10%);
    margin:50px 0;
    margin-left:-10%;
}

.wireframes img{
    width:40%;
    margin:15px 0 15px 0;
    margin-left:9%;
}}