body{
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}
/* burger Mobile */
.burger-menu{
    width: 50px;
    height: 50px;
}
.burger {
  position: fixed;
  background: #000;
  -webkit-appearance: none;
  width: 45px;
  height: 5px;
  top: 45px;
  left: 35px;
  margin-top: -5px;
  opacity: 1;
  display: block;
  padding: 0;
  border: none;
  cursor: pointer;
}
.burger::before {
  position: absolute;
  background: #000;
  width: 45px;
  height: 5px;
  top: 10px;
  z-index: 999;
  content: "";
  display: block;
}
.burger::after {
  position: absolute;
  background: #000;
  width: 45px;
  height: 5px;
  bottom: 10px;
  content: "";
  display: block;
}
.burger::after, .burger::before, .burger {
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}
.burger-menu.burger-cross .burger::after{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	bottom: 0px;
	background: #FFF;
	opacity: 1;
}
.burger-menu.burger-cross .burger::before{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	top: 0px;
	background: #FFF;
	opacity: 1;
}
.burger-menu.burger-cross .burger{
	background: #000;
}
.burger-cross{
	z-index: 999;
	position: absolute;
}
.menu {
    position: fixed;
    top: 0;
    bottom: 50%;
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    z-index: 998;
    transition: .2s;
    transform: translateX(-100%);
}

.menu--open {
    transform: translateX(0);
    background-color: #000;
}
.nav {
    display: none;
}
/*Design menu__el*/
.lien {
    padding: 15% 0 0 0;
    text-align: center;
	list-style: none;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 14px;
}

.lien li {
    margin-top: 45px;
}

.lien li a {
    transition: 300ms;
    color: #FFFFFF;
    font-weight: 500;
	text-decoration: none;
}

.lien li a:hover {
    color: #000;
}
/*Title*/
.title{
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    margin-top: 45px;
    margin-bottom: 0;
    margin-left: 35px;
    margin-right: 35px;
    line-height: 1.6;
}
.title__big{
    font-size: 58px;
}
.title__medium{
    font-size: 36px;
    margin-bottom: 0;
}
.title__medium--grey{
    color: #5E5E5E;
    font-weight: 500;
}
.title__medium--center{
    text-align: center;
}
.title__name{
    color: black;
    font-weight: 500;
    margin-left: 0;
    margin-right: 0;
    margin-top: 22.5px;
    margin-bottom: 0;
    text-decoration: none;
    cursor: pointer;

}
/*Texte*/
.txt{
    font-size: 9px;
    font-family: 'Archivo', sans-serif;
    margin-left: 35px;
    margin-right: 35px;
    line-height: 1.6;
    margin-top: 45px;
    margin-bottom: 45px;
}
.section{
    margin-top: 45px;
}
/**Banner btn**/

.btn {
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    display: block;
    padding: 5px 16px;
    height: 25px;
    line-height: 1.6;
    width: 80px;
    color: #000000;
    border: 2px solid #000000;
    text-decoration: none;
    border-radius: 0px;
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: #FFF;
  }
  
.btn:hover {
    background-color: #000000;
    color: #fff;
    line-height: 40px;
    transition: all .2s ease-in-out;
    transform: translate(8px, 8px);
  }
  
.btn:hover:after {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    transition: all .2s ease-in-out;
  }
  
.btn:after {
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    right: 0px;
    bottom: 0px;
    left: 8px;
    height: 35px;
    width: 112px;
    border: 2px solid black;
    background-color: black;
    z-index: -1;
  }
.center__button {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 80%;
    margin: auto auto;
    margin-top: 45px;
  }
.mouse{
    display: none;
}
/*img*/
.image {
    width: 60%;
    margin-top: 0;
    margin-left: 20%;
}
.pictures{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 45px;
    margin-bottom: 0;
}
.items {
    text-align: center;
}
.logo__image{
    width: 70px;
    margin-top: 75px;
}
/*Footer*/
.footer{
    background-color: #000;
    overflow: hidden;
}
.p__footer{
    color: #FFF;
    text-decoration: none;
    margin-left: 35px;
}
li .p__footer{
    list-style-type: none;
    margin: 0;
    margin-left: 35px;
    padding: 0;
}
ul{
    padding: 0;
}
.logo__image--left{
    margin-left: 35px;
}
@media (min-width:700px){
    .burger{
        top: 65px;
        left: 45px;
    }
    .title{
        font-size: 19px;
        margin-left: 45px;
        margin-right: 45px;
    }
    .title__medium{
        font-size: 49px;
        margin-top: 65px;
    }
    .title__big{
        font-size: 78px;
        margin-top: 65px;
        margin-bottom: 0;
    }
    .center__button{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        width: 90%;
    }
    .btn{
        font-size: 19px;
        height: 35px;
        width: 100px;
        line-height: 1.6;
    }
    .btn:after{
        height: 45px;
        width: 132px;
        background-color: #000;
    }
    .title__name{
        margin-top: 32.5px;
    }
    .txt{
        margin-top: 65px;
        font-size: 12px;
        text-align: left;
        margin-bottom: 65px;
        margin-left: 45px;
        margin-right: 45px;
    }
    li .p__footer{
        margin-left: 45px;
    }
    .logo__image{
        width: 120px;
    }
    .logo__image--left{
        margin-bottom: 65px;
        margin-left: 135px;
    }
}
@media (min-width: 1200px){
    .flex{
        display: flex;
    }
    .flex__nav{
        justify-content: space-between;
    }
    .burger-menu {
        display: none;
    }
	
    .flex {
        display:flex;
        justify-content: space-between;
    }
    .nav{
        display: block;
		margin-top: 37.5px;
		margin-bottom: 0;
		margin-left: 55px;
        font-size: 22px;
    }
    .nav__el {
        display: inline-block;
        margin: 0 55px 0 0;
		position: relative;
		text-transform: uppercase;
	}
	.nav__el a{
		text-decoration: none;
		color: #000;
	}
	.nav ul{
		list-style-type: none;
		font-family: 'Oswald', sans-serif;
		margin-top: 0;
		padding: 0;
		margin-bottom: 0;
	}
    .nav__el:after {
        content: "";
        position: absolute;
        height: 3px;
        width: 60%;
        background-color: black;
        left: 20%;
		top: 150%;
		opacity: 0;
        transition: 300ms;
    }
    .nav__el:hover:after {
		top: 100%;
		opacity: 1;
    }
    .title{
        font-size: 22px;
        margin-top: 75px;
        margin-left: 55px;
        margin-right: 55px;
    }
    .title__medium{
        font-size: 57px;
    }
    .title__medium--grey{
        text-align: center;
    }
    .title__big{
        font-size: 92px;
        text-align: center;
    }
    .txt{
        font-size: 14px;
        margin-left: 55px;
        margin-right: 55px;
    }
    .image{
        width: 40%;
        height: 40%;
        margin-left: 55px;
        margin-right: 55px;
        margin-top: 75px;
    }
    .image__nav{
        position: absolute;
        right: 0;
        top: 0;
        margin: 0;
        margin-top: 10px;
        width: 10%;
        height: 10%;
    }
    .flex__reverse{
        flex-direction: row-reverse;
    }
    .image--carte{
        width: 450px;
        height: auto;
    }
    .pictures{
        width: 180px;
    }
    .title__name{
        margin-top: 37.5px;
    }
    .mouse {
        text-indent: 100%;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        background: #E0E0E0 linear-gradient(transparent 0%, transparent 50%, #BABABA 50%, #BABABA 100%);
        position: relative;
        margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 32.5px;
        width: 30px;
        height: 50px;
        border-radius: 100px;
        background-size: 100% 200%;
        animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
      }
    
      .mouse:before, .mouse:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
      
      .mouse:before {
        width: 26px;
        height: 43px;
        background-color: #fff;
        border-radius: 100px;
      }
      
      .mouse:after {
        background-color: #BABABA;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        animation: trackBallSlide 5s linear infinite;
      }
      @keyframes colorSlide {
        0% {
          background-position: 0% 100%;
        }
        20% {
          background-position: 0% 0%;
        }
        21% {
          background-color: #E0E0E0;
        }
        29.99% {
          background-color: #BABABA;
          background-position: 0% 0%;
        }
        30% {
          background-color: #E0E0E0;
          background-position: 0% 100%;
        }
        50% {
          background-position: 0% 0%;
        }
        51% {
          background-color: #E0E0E0;
        }
        59% {
          background-color: #BABABA;
          background-position: 0% 0%;
        }
        60% {
          background-color: #E0E0E0;
          background-position: 0% 100%;
        }
        80% {
          background-position: 0% 0%;
        }
        81% {
          background-color: #E0E0E0;
        }
        90%, 100% {
          background-color: #BABABA;
        }
      }
      
      @keyframes trackBallSlide {
        0% {
          opacity: 1;
          transform: scale(1) translateY(-20px);
        }
        6% {
          opacity: 1;
          transform: scale(0.9) translateY(5px);
        }
        14% {
          opacity: 0;
          transform: scale(0.4) translateY(40px);
        }
        15%, 19% {
          opacity: 0;
          transform: scale(0.4) translateY(-20px);
        }
        28%, 29.99% {
          opacity: 1;
          transform: scale(1) translateY(-20px);
        }
        30% {
          opacity: 1;
          transform: scale(1) translateY(-20px);
        }
        36% {
          opacity: 1;
          transform: scale(0.9) translateY(5px);
        }
        44% {
          opacity: 0;
          transform: scale(0.4) translateY(40px);
        }
        45%, 49% {
          opacity: 0;
          transform: scale(0.4) translateY(-20px);
        }
        58%, 59.99% {
          opacity: 1;
          transform: scale(1) translateY(-20px);
        }
        60% {
          opacity: 1;
          transform: scale(1) translateY(-20px);
        }
        66% {
          opacity: 1;
          transform: scale(0.9) translateY(5px);
        }
        74% {
          opacity: 0;
          transform: scale(0.4) translateY(40px);
        }
        75%, 79% {
          opacity: 0;
          transform: scale(0.4) translateY(-20px);
        }
        88%, 100% {
          opacity: 1;
          transform: scale(1) translateY(-20px);
        }
      }
      
      @keyframes nudgeMouse {
        0% {
          transform: translateY(0);
        }
        20% {
          transform: translateY(8px);
        }
        30% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(8px);
        }
        60% {
          transform: translateY(0);
        }
        80% {
          transform: translateY(8px);
        }
        90% {
          transform: translateY(0);
        }
      }
      
      @keyframes nudgeText {
        0% {
          transform: translateY(0);
        }
        20% {
          transform: translateY(2px);
        }
        30% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(2px);
        }
        60% {
          transform: translateY(0);
        }
        80% {
          transform: translateY(2px);
        }
        90% {
          transform: translateY(0);
        }
      }
      
      @keyframes colorText {
        21% {
          color: #E0E0E0;
        }
        30% {
          color: #BABABA;
        }
        51% {
          color: #E0E0E0;
        }
        60% {
          color: #BABABA;
        }
        81% {
          color: #E0E0E0;
        }
        90% {
          color: #BABABA;
        }
      }
    .logo__image{
        width: 180px;
    }
    .flexwrap{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .logo__image--left{
       margin-right: 65px;
    }
    li .p__footer{
        margin-left: 55px;
        margin-top: 55px;
    }
}
@media (min-width:1700px){
    .title{
        font-size: 25px;
        margin-top: 85px;
        margin-left: 130px;
        margin-right: 130px;
    }
    .title__medium{
        font-size: 65px;
    }
    .title__big{
        font-size: 104px;
    }
    .txt{
        margin-right: 130px;
        margin-left: 130px;
    }
    .txt--right{
        margin-right: 260px;
    }
    .center__button{
        margin-top:85px;
    }
    .txt--left{
        margin-right: 260px;
    }
    .image{
        margin-left: 130px;
        margin-right: 130px;
    }
    .mouse{
        margin-top: 85px;
    }
    .title__name{
        margin-left: 0;
        margin-right: 0;
    }
    .pictures{
        width: 250px;
        margin-top: 85px;
    }
    .p__footer{
        margin-left: 65px;
    }
    li .p__footer{
        margin-left: 65px;
    }
}