@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
}	

h2{
  margin-left: 260px;
  margin-top: 70px;
  height: 100vh; 
  display: flex;
  align-items: center; 
  justify-content: center;
} 

.invisible {
    visibility: hidden;
}

.some-element {
  width: var(--clip-width);
  left: var(--left-offset);
  height: var(--clip-height);
  line-height: var(--line-height);
}

:root {
  width: 6;
  left: 29px;
  height: 50px;
  line-height: calc(var(--clip-height) - 5px);
}

html {
  background-color: #5138BE;
  height: 100%;
}

body {
	color:#c3e1fe;
    display: flex;
    margin: 0;
    font-family: sans-serif;
}

.Words {
  margin: 0 auto;
  padding: 80px 0;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}

.Words-line {
  height: var(--clip-height);
  overflow: hidden;
  position: relative;
}

.Words-line:nth-child(odd) {
  transform: skew(60deg, -30deg) scaleY(.66667);
}

.Words-line:nth-child(even) {
  transform: skew(0deg, -30deg) scaleY(1.33333);
}

.Words-line:nth-child(1) {
  left: calc(var(--left-offset) * 1);
}

.Words-line:nth-child(2) {
  left: calc(var(--left-offset) * 2);
}

.Words-line:nth-child(3) {
  left: calc(var(--left-offset) * 3);
}

.Words-line:nth-child(4) {
  left: calc(var(--left-offset) * 4);
}

.Words-line:nth-child(5) {
  left: calc(var(--left-offset) * 5);
}

.Words-line:nth-child(6) {
  left: calc(var(--left-offset) * 6);
}

p {
  height: var(--clip-height);
  line-height: var(--line-height);
  padding: 0 10px;
  transition: all .4s ease-in-out
  transform: translate3d(0, 0, 0);
  vertical-align: top;
  white-space: nowrap;
}

.Words:hover p {
  transform: translate3d(0, calc(-1 * var(--clip-height)), 0);
}

html:before,
body:before {
  background: linear-gradient(35deg, #f29810f7,#ff0707);
  bottom: 0;, #c5eff7);
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
}

svg {
  cursor: pointer;
  height: 100px;
  width: 80px;
}
svg path {
  fill: #fff;
}
ol {
  list-style-type: none;
}
a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}
a[href]:hover:after {
  transform: scaleX(1);
}
a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  transition: transform 0.15s;
  transform-origin: left;
  transform: scaleX(0);
}
.menu {
  position: absolute; 
  left:30px;
}
.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  width: 250px;
  z-index: 1;
}
.menu__toggle-label {
  height: 100vh;
  left: 10;
  position: center-right;
  width: 0px;
  top:10;
  
}
.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 0.15s;
  z-index: 2;
}
.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  transform: scale(0);
}
.menu__toggle {
  opacity: 0;
  position: fixed;
}
.menu__toggle:checked ~ .menu__toggle-label {
  background: rgba(0,0,0,0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  transition: background 0.15s;
  width: 100vw;
}
.menu__toggle:checked ~ .menu__toggle-label svg:nth-of-type(1) {
  transform: scale(0);
}
.menu__toggle:checked ~ .menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  transform: scale(1);
  transition: transform 0.15s;
  transition-delay: 0.925s;
}
.menu__toggle:checked ~ .menu__content {
  transform: translate(100%, 0);
}
.menu__toggle:checked ~ .menu__content .menu-item {
  transform: translateX(0);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(1) {
  border-color: #9b59b6;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: #9b59b6;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(2) {
  border-color: #86e2d5;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: #86e2d5;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(1) {
  transition-delay: 0.225s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(2) {
  transition-delay: 0.275s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) {
  transition-delay: 0.325s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  transition-delay: 0.375s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  transition-delay: 0.425s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  transition-delay: 0.475s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) {
  transition-delay: 0.525s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  transition-delay: 0.575s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  transition-delay: 0.625s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  transition-delay: 0.675s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(5) {
  transition-delay: 0.725s, 0.875s;
}
.menu__content > .menu-item {
  border-left: 8px solid transparent;
}
.menu__content > .menu-item > a {
  line-height: 44px;
  min-width: 60px;
}
.sub-menu {
  padding: 0 0 0 44px;
}
.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  transform: translateX(-100%);
}
.menu-item .menu-item {
  transform: translateX(-150%);
}

/*Taille images*/
	img{
      size: alt="La Joconde": 200px,400px,100%;
}