article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 16px;
}

body {
	--color-text: #fff;
	--color-bg: #0e0e0f;
	--color-link: #826437;
	--color-link-hover: #fff;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: moderno-fb, "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
	overflow: hidden;
}

.demo-2 {
	font-family: Futura, "futura-pt", Arial, sans-serif;
}

.demo-2,
.demo-3 {
    --color-link: #fbc966;
}

.demo-4 {
    --color-link: #52e093;
}

.gl, .gll {
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	position: absolute;
}


canvas {
	display: block;
}

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

.message {
	background: var(--color-text);
	color: var(--color-bg);
	padding: 1rem;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
	text-align: center;
}

.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 0;
}

.alo{
        z-index: 1000000 !important;
        opacity: 0.95 !important;
}



@media screen and (min-width: 53em) {
	.message {
		display: none;
	}
	.frame-two, .frame-one {
		position: fixed;
		text-align: left;
		z-index: 10000;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 2rem 3rem;
		pointer-events: none;
		grid-template-columns: 75% 25%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title links'
							'content content'
							'github demos';
	}
	.frame__title-wrap {
		grid-area: title;
		display: flex;
	}
	.frame__title {
		font-size: 1rem;
		margin: 0;
	}
	.frame__tagline {
		margin: 0 0 0 1rem;
		padding: 0 0 0 1rem;
		opacity: 0.6;
		display: block;
	}
	.frame__github {
		grid-area: github;
		justify-self: start;
		margin: 0;
	}
	.frame__demos {
		margin: 0;
		grid-area: demos;
		justify-self: end;
	}
	.frame__links {
		grid-area: links;
		padding: 0;
		justify-self: end;
	}
	.frame__content {
		grid-area: content;
		margin: 0;
	}
	.frame a {
		pointer-events: auto;
	}
}



    /* HEADER */
.header {
	z-index: 10000000 !important;
	position: absolute;
}
.logomenu {
	display: block;
    list-style-type: none;
    padding: 0;
    margin: 30px 0 0 30px;
}
.logomenu li.is-active::before {
    display: none;

}
 .header--logo img {
	width: auto;
    height: 40px;

}
.header--logo img{

-moz-animation: 0.5s ease 0s normal forwards 1 fadeinino;
        -o-animation: 0.5s ease 0s normal forwards 1 fadeinino;
        -webkit-animation: 0.5s ease 0s normal forwards 1 fadeinino;
        animation: 0.5s ease 0s normal forwards 1 fadeinino;
        animation-delay: 0.5s;
        opacity: 0;
}

@keyframes fadeinino{
    0% { opacity:0; transform:translateX(-50px)}
    20% { opacity:0; transform:translateX(-25px)}
    100% { opacity:1; transform:translateX(0px)}
}

    /* END HEADER */




 /* BOTTOM */

.bottom {
    position: absolute;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 70px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 99999;
}

.paddus {
	    padding: 0 !important;
}
.side-bottom {
    margin: 0 auto;
    padding: 0 !important;
    right: 0;
    position: absolute;
    margin-right: 40px;
}
.bottom ul li {
    display: inline-block;
    text-align: center;
    margin-right: 20px;
}
.bottom .two{
    margin-right: 22px;
}
.bottom .three  {
	margin-right: 0px;	
}

.social-media {
	height: 20px;
}
.side-bottom  li a svg {
	height: 20px;
}
.one {
        -moz-animation: 0.3s ease 0s normal forwards 1 coco;
        -o-animation: 0.3s ease 0s normal forwards 1 coco;
        -webkit-animation: 0.3s ease 0s normal forwards 1 coco;
        animation: 0.3s ease 0s normal forwards 1 coco;
        animation-delay: 0.5s;
        opacity: 0;
}

@keyframes coco{
    0% { opacity:0; transform:translateY(20px)}
    30% { opacity:0; transform:translateY(15px)}
    100% { opacity:1; transform:translateY(0px)}
}


.two {
        -moz-animation: 0.3s ease 0s normal forwards 1 momo;
        -o-animation: 0.3s ease 0s normal forwards 1 momo;
        -webkit-animation: 0.3s ease 0s normal forwards 1 momo;
        animation: 0.3s ease 0s normal forwards 1 momo;
        animation-delay: 0.65s;
        opacity: 0;
}

@keyframes momo{
    0% { opacity:0; transform:translateY(20px)}
    30% { opacity:0; transform:translateY(15px)}
    100% { opacity:1; transform:translateY(0px)}
}

.three {
        -moz-animation: 0.3s ease 0s normal forwards 1 three;
        -o-animation: 0.3s ease 0s normal forwards 1 three;
        -webkit-animation: 0.3s ease 0s normal forwards 1 three;
        animation: 0.3s ease 0s normal forwards 1 three;
        animation-delay: 0.75s;
        opacity: 0;
}

@keyframes three{
    0% { opacity:0; transform:translateY(20px)}
    30% { opacity:0; transform:translateY(15px)}
    100% { opacity:1; transform:translateY(0px)}
}


/* END BOTTOM */

/* GRID */

.wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;
    z-index: 99998;
}
.line, .line2, .line3, .line4, .line5, .line6, .line7 {
	position: absolute;
	top: 0;
	left: 12.5%;
	height: 100%;
	width:1px;
	background-color: #fff;
	opacity: 0.06;
}

.line2 {
	left: 25%;
}
.line3 {
	left: 37.5%;
}
.line4 {
	left: 50%;
}
.line5 {
	left: 62.5%;
}
.line6 {
	left: 75%;
}
.line7 {
	left: 87.5%;
}

.dot {
 	border-radius: 50%;
	position: absolute;
	top: 25%;
	left: 12.4%;
	height: 4px;
	width:4px;
	background-color: #fff;
	opacity: 0.4;
}
.dot2 {
	top: 50%;
}


.dot3 {
	top: 75%;
}

.dot4, .dot5, .dot6 {
	left: 37.4%;
}
.dot5 {
	top: 50%;
}
.dot6 {
	top: 75%;
}

.dot7, .dot8, .dot9 {
	left: 24.9%;
}
.dot8 {
	top: 50%;
}
.dot9 {
	top: 75%;
}

.dot10, .dot11, .dot12 {
	left: 49.9%;
}
.dot11 {
	top: 50%;
}
.dot12 {
	top: 75%;
}

.dot13, .dot14, .dot15 {
	left: 62.4%;
}
.dot14 {
	top: 50%;
}
.dot15 {
	top: 75%;
}

.dot16, .dot17, .dot18 {
	left: 74.9%;
}
.dot17 {
	top: 50%;
}
.dot18 {
	top: 75%;
}

.dot19, .dot20, .dot21 {
	left: 87.4%;
}
.dot20 {
	top: 50%;
}
.dot21 {
	top: 75%;
}

/* GRID */



/* NAV DOTS */
.nav {
position: absolute;
z-index: 100000;
bottom: 40px;
left: 42px;
}

.nav-dot {
	position: absolute;
	border-radius: 50%;
	background: #fff;
	width: 9px;
	height: 9px;


}


.nav-dot1 {
-moz-animation: 0.5s ease 0s normal forwards 1 doty1;
        -o-animation: 0.5s ease 0s normal forwards 1 doty1;
        -webkit-animation: 0.5s ease 0s normal forwards 1 doty1;
        animation: 0.5s ease 0s normal forwards 1 doty1;
        animation-delay: 0.6s;
        opacity: 0;
}



@keyframes doty1{
    0% { opacity:0; transform:translateX(0px)}
    20% { opacity:0; transform:translateX(0px)}
    100% { opacity:1; transform:translateX(0px)}
}

.nav-dot2 {
-moz-animation: 0.5s ease 0s normal forwards 1 doty;
        -o-animation: 0.5s ease 0s normal forwards 1 doty;
        -webkit-animation: 0.5s ease 0s normal forwards 1 doty;
        animation: 0.5s ease 0s normal forwards 1 doty;
        animation-delay: 0.8s;
        opacity: 0;
}



@keyframes doty{
    0% { opacity:0; transform:translateX(0px)}
    20% { opacity:0; transform:translateX(20px)}
    100% { opacity:1; transform:translateX(50px)}
}



.nav-dot3 {
-moz-animation: 0.5s ease 0s normal forwards 1 doty3;
        -o-animation: 0.5s ease 0s normal forwards 1 doty3;
        -webkit-animation: 0.5s ease 0s normal forwards 1 doty3;
        animation: 0.5s ease 0s normal forwards 1 doty3;
        animation-delay: 0.8s;
        opacity: 0;
}



@keyframes doty3{
    0% { opacity:0; transform:translateY(0px)}
    20% { opacity:0; transform:translateY(-20px)}
    100% { opacity:1; transform:translateY(-50px)}
}



.next, .prev {
	position: absolute;
	bottom: -30px;
	letter-spacing: 5px;
    font-family: 'montserratlight';
}

.next a, .prev a{
	color: #fff;
}


.next {
-moz-animation: 0.5s ease 0s normal forwards 1 next;
        -o-animation: 0.5s ease 0s normal forwards 1 next;
        -webkit-animation: 0.5s ease 0s normal forwards 1 next;
        animation: 0.5s ease 0s normal forwards 1 next;
        animation-delay: 1.2s;
        opacity: 0;
}



@keyframes next{
    0% { opacity:0; transform:translateX(0px)}
    20% { opacity:0; transform:translateX(60px)}
    100% { opacity:1; transform:translateX(100px)}
}


.prev {
bottom: -18px;
-moz-animation: 0.6s ease 0s normal forwards 1 prev;
        -o-animation: 0.6s ease 0s normal forwards 1 prev;
        -webkit-animation: 0.6s ease 0s normal forwards 1 prev;
        animation: 0.6s ease 0s normal forwards 1 prev;
        animation-delay: 1.2s;
        opacity: 0;
}



@keyframes prev{
    0% { opacity:0; transform:translateX(0px)}
    20% { opacity:0; transform:translateX(70px)}
    100% { opacity:1; transform:translateX(100px)}
}




.next::after {
    content: "";
    height: 1.3px;
    width: 0px;
    background-color: #fff;
    position: absolute;
    left: -10px;
    top: 7px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.next:hover::after{
    content: '';
    width: 78px;
    height: 1.3px;    
}





.prev::after {
    content: "";
    height: 1.3px;
    width: 0px;
    background-color: #fff;
    position: absolute;
    left: -10px;
    top: 7px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    opacity: 1;  
}
.prev:hover::after{
    content: '';
    width: 78px;
    height: 1.3px; 
    opacity: 1;   
}




.rotate-text {

   width: 25px;
   transform: rotate(-90deg);
}

/* END NAV DOTS */



.hide {
	display: none !important;
}
/* title */
.titre-this{
	position: absolute;
    z-index: 100000;
    top: 52%;
    width: 50%;
    text-align: center;
    margin: 0 auto;
}
.wrapy, .wrapytwo {
	overflow: hidden;
    position: absolute;
    width: 100%;
    height: 54px;
    padding: 0;
    margin: 0;
}
.wrapytwo {
    margin-top: 55px;
    height: 30px;
}
.wrapy span{
	display: inline-block;
	font-family: 'montserratregular';
    letter-spacing: 14px;
    font-size: 58px;
}

.g {

	margin-right: 30px;
}


.wrapy span:nth-child(1) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 1.75s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}

}

.wrapy span:nth-child(2) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 1.80s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}

}

.wrapy span:nth-child(3) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 1.85s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}

}
.wrapy span:nth-child(4) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 1.90s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}


.wrapy span:nth-child(5) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 1.95s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}

.wrapy span:nth-child(6) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 2s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}

.wrapy span:nth-child(7) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 2.05s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}

.wrapy span:nth-child(8) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 2.1s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}
.wrapy span:nth-child(9) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 2.15s;
        opacity: 0;
}
.wrapy span:nth-child(10) {
        -moz-animation: 0.3s ease 0s normal forwards 1 edno;
        -o-animation: 0.3s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.3s ease 0s normal forwards 1 edno;
        animation: 0.3s ease 0s normal forwards 1 edno;
        animation-delay: 2.15s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}

.soustitre {
        -moz-animation: 0.5s ease 0s normal forwards 1 edno;
        -o-animation: 0.5s ease 0s normal forwards 1 edno;
        -webkit-animation: 0.5s ease 0s normal forwards 1 edno;
        animation: 0.5s ease 0s normal forwards 1 edno;
        animation-delay: 2.15s;
        opacity: 0;
}

@keyframes edno{
    0% { opacity:0.1; transform:translateY(40px)}
    100% { opacity:1; transform:translateY(0px)}
}


.frame {
        -moz-animation: 0.8s ease 0s normal forwards 1 mele;
        -o-animation: 0.8s ease 0s normal forwards 1 mele;
        -webkit-animation: 0.8s ease 0s normal forwards 1 mele;
        animation: 0.8s ease 0s normal forwards 1 mele;
        animation-delay: 2s;
        opacity: 0;
}
@keyframes mele{
    0% { opacity:0.1; }
    100% { opacity:1; }
}

.soustitre {
	font-family: 'montserratlight';
	font-size: 16px;
    letter-spacing: 22px;
        margin-left: 1.2%;
}





/* END title */


/* Side Nav */

.side-navv {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 52px;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
   	z-index: 100000;

}
.dot-nav{
    cursor: pointer;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    margin-bottom: 24px;
    position: relative;
    will-change: opacity,transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: background .3s ease-in-out;
	height: 6px;
	width: 6px;
	margin-bottom: 80px;

}


.side-navv span:last-child {
	margin-bottom: 0px;
}


.side-navv span svg {
    display: flex;
    position: absolute;
        top: -15px;
    right: -15px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}
.side-navv span svg #XMLID_1_ {
	fill:none !important;

}

.side-navv span:hover #Layer_1 {
    width: 35px;
    height: 35px;
    top: -14px;
    right: -15px;
    opacity: 1;

}
.side-navv .page-cercle {
    width: 35px;
    height: 35px;
    top: -14px;
    right: -15px;
    opacity: 0.5;
    fill:none !important;
}

.side-navv span:hover  {
    background: rgba(255,255,255,1);

}

.side-navv .dot-nav .not-circle:hover .page-cercle {
    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;
}
.side-navv span:nth-child(1) {
        -moz-animation: 0.32s ease 0s normal forwards 1 navdot;
        -o-animation: 0.32s ease 0s normal forwards 1 navdot;
        -webkit-animation: 0.32s ease 0s normal forwards 1 navdot;
        animation: 0.32s ease 0s normal forwards 1 navdot;
        animation-delay: 1.15s;
        opacity: 0;
}

@keyframes navdot{
    0% { opacity:0.1; transform:translateX(40px)}
    100% { opacity:1; transform:translateX(0px)}
}

.side-navv span:nth-child(2) {
        -moz-animation: 0.32s ease 0s normal forwards 1 navdot;
        -o-animation: 0.32s ease 0s normal forwards 1 navdot;
        -webkit-animation: 0.32s ease 0s normal forwards 1 navdot;
        animation: 0.32s ease 0s normal forwards 1 navdot;
        animation-delay: 1.3s;
        opacity: 0;
}

@keyframes navdot{
    0% { opacity:0.1; transform:translateX(40px)}
    100% { opacity:1; transform:translateX(0px)}
}

.side-navv span:nth-child(3) {
        -moz-animation: 0.32s ease 0s normal forwards 1 navdot;
        -o-animation: 0.32s ease 0s normal forwards 1 navdot;
        -webkit-animation: 0.32s ease 0s normal forwards 1 navdot;
        animation: 0.32s ease 0s normal forwards 1 navdot;
        animation-delay: 1.45s;
        opacity: 0;
}

@keyframes navdot{
    0% { opacity:0.1; transform:translateX(40px)}
    100% { opacity:1; transform:translateX(0px)}
}

.side-navv span:nth-child(4) {
        -moz-animation: 0.32s ease 0s normal forwards 1 navdot;
        -o-animation: 0.32s ease 0s normal forwards 1 navdot;
        -webkit-animation: 0.32s ease 0s normal forwards 1 navdot;
        animation: 0.32s ease 0s normal forwards 1 navdot;
        animation-delay: 1.6s;
        opacity: 0;
}

@keyframes navdot{
    0% { opacity:0.1; transform:translateX(40px)}
    100% { opacity:1; transform:translateX(0px)}
}

.side-navv span:nth-child(5) {
        -moz-animation: 0.32s ease 0s normal forwards 1 navdot;
        -o-animation: 0.32s ease 0s normal forwards 1 navdot;
        -webkit-animation: 0.32s ease 0s normal forwards 1 navdot;
        animation: 0.32s ease 0s normal forwards 1 navdot;
        animation-delay: 1.75s;
        opacity: 0;
}

@keyframes navdot{
    0% { opacity:0.1; transform:translateX(40px)}
    100% { opacity:1; transform:translateX(0px)}
}




/* End Side Nav */


/* HAMBURGER */


.menu-btn {
	overflow: hidden;
	position: absolute;
	display: flex;
	z-index: 100000000000000000000000;
	width: 100px;
	height: 80px;
	cursor: pointer;
	top: 0px;
	right: -20px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.menu-btn__burger {
	position: absolute;
    top: 35px;
    left: 10px;
	background-color: #fff;
	width: 40px;
	height: 2px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}


.burger-one {
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    transition-delay: .3s;
    animation-delay: 0.1s;
	transform: translateY(-10px);


}

.burger-two{
	    transition: width .2s ease-in-out 0s,-webkit-transform .7s cubic-bezier(.87,-.41,.19,1.44) .4s;
    transition: transform .7s cubic-bezier(.87,-.41,.19,1.44) 1.3s,width .2s ease-in-out 0s;
    transition: transform .7s cubic-bezier(.87,-.41,.19,1.44) 1.3s,width .2s ease-in-out 0s,-webkit-transform .7s cubic-bezier(.87,-.41,.19,1.44) .4s;
    animation-delay: 0.05s;
}

.burger-three {
	    transition: width .2s ease-in-out 0s,-webkit-transform .7s cubic-bezier(.87,-.41,.19,1.44) .2s;
    transition: transform .7s cubic-bezier(.87,-.41,.19,1.44) 1.2s,width .2s ease-in-out 0s;
    transition: transform .7s cubic-bezier(.87,-.41,.19,1.44) 1.2s,width .2s ease-in-out 0s,-webkit-transform .7s cubic-bezier(.87,-.41,.19,1.44) .3s;
	transform: translateY(10px);
	animation-delay: 0.1s;
}


/* ANIMATION HAMBURGER */



.menu-btn {
        -moz-animation: 0.32s ease 0s normal forwards 1 navdot;
        -o-animation: 0.32s ease 0s normal forwards 1 navdot;
        -webkit-animation: 0.32s ease 0s normal forwards 1 navdot;
        animation: 0.32s ease 0s normal forwards 1 navdot;
        animation-delay: 0.8s;
        opacity: 0;
}

@keyframes yo{
    0% { opacity:0.1; transform:translate(40px, -10px)}
    100% { opacity:1; transform:translate(0px, -10px)}
}








.menu-btn:hover .burger-two {
	width: 50px;
}

.menu-btn:hover .burger-three  {
	width: 30px;
}


.menu-btn.open .burger-one {
	transform: translate(100px, -10px);


}
.menu-btn.open .burger-three {

	transform: translate(200px, 10px);

}
.menu-btn.open .burger-two {

	transform: translateX(200px);


}












.burger-fore {
	transform: rotate(-45deg) translate(100px);
		-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	transition-delay: .1s;
}
.burger-five {
	transform: rotate(45deg) translate(100px);
			-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	transition-delay: 0.05s;
}

.menu-btn.open .burger-fore {
	transform: rotate(-45deg) translate(0px);
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	transition-delay: .8s;
}
.menu-btn.open .burger-five {
	transform: rotate(45deg) translate(0px);
		-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	transition-delay: 0.7s;
}
/* END HAMBURGER */

/* overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    background-color: #000;
		-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	transition-delay: 0.2s;
    opacity: 0;
}
.show{
        z-index: 1000000;
        opacity: 1;
         background: rgba(000,000,000,.9);
}


/* END overley */


/* CONTACT */


.contact {
    position: absolute;
    width: 70%;
    height: 30%;
    z-index: 100000000000000000000;
}

.contact div {
    width: 45%;
}
.contact h1 {
    font-size: 40px;
    font-family: 'montserratbold';
    margin-bottom: 40px;
}
.contact p {
    font-size: 16px;
    font-family: 'montserratregular';
    opacity: 0.9;
}
.contact-left {
    float: left;
    margin-left: 4%;
}
.last-p {
    margin-bottom: 40px;
}
.contact-right {
    float: right;
    text-align: right;
    margin-right: 4%;
}
.overlay .contact .contact-left a {
    color: #fff !important;
    font-family: 'montserratbold';
    font-size: 14px;
    margin-left: 70px;
}
.overlay .contact .contact-left a::after {
content: '';
    display: flex;
    width: 50px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    margin-top: -9px;
}

.img-social-menu{
    width: 20px;
    margin-right: 20px;
}
.img-social-menu-last{
    width: 15px;
    margin-right: 0px;
}
.contact-left span, .contact-right span{
    overflow: hidden;
    display: block;
    height: 34px;
}
.gplus {
    width: 14px;
}
.contact-left span:first-child, .contact-right span:first-child{
    overflow: hidden;
    display: block;
    height: 91px;
}
.socialm {
    margin-top: 40px;
}

.anim-h1, .anim-h2, .p1, .p2, .p3, .p4, .p5, .p6 {
    transition: width .5s ease-in-out 0s,-webkit-transform .7s cubic-bezier(.87,-.41,.19,1.44) .4s;
    transition: transform .7s cubic-bezier(.87,-.41,.19,1.44) 1.3s,width .2s ease-in-out 0s;
    transition: transform .7s cubic-bezier(.87,-.41,.19,1.44) 1.3s,width .2s ease-in-out 0s,-webkit-transform .7s cubic-bezier(.87,-.41,.19,1.44) .4s;
    animation-delay: 0.5s;
    transform:translate(0px, 70px);

}
.anim-h2 {
    transition-delay: 0.65s;
}
.p1 {
    transition-delay: 0.75s;
}
.p2 {
    transition-delay: 0.85s;
}
.p3 {
    transition-delay: 0.95s;
}
.p4 {
    transition-delay: 1.05s;
}
.p5 {
    transition-delay: 1.15s;
}
.p6 {
    transition-delay: 1.25s;
}
.socialm, .cv {
    opacity: 0;
        -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    transition-delay: 1.8s;
}
.anim-show {
    transform:translate(0px, 0px);
    opacity: 1; 
}










/* END CONTACT */
.offset-colour {
    display: none;
}
.circle {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1px;
  stroke-dasharray: 1600;
  stroke-miterlimit: 10;
  stroke-dashoffset: 1600;
  transition: all 3s linear;

}

.circle:hover {
stroke-dashoffset: 0;
}


.circle-pagy {
    stroke-dashoffset: 0;
}




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

.wrapy, .wrapytwo {
    width: 106%;
}
.wrapy span {
    font-size: 45px;
}
.wrapytwo {
    margin-top: 38px;
}

.soustitre {
    font-size: 12px;
    letter-spacing: 20px;
}
.contact {
    width: 95%;
    height: 44%;
}
.contact p {
    font-size: 12px;
}


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

    .wrapy, .wrapytwo {
        width: 106%;
    }
    .wrapy span {
        font-size: 45px;
    }
    .wrapytwo {
        margin-top: 38px;
    }

    .soustitre {
        font-size: 12px;
        letter-spacing: 20px;
    }
    .contact {
        width: 95%;
        height: 44%;
    }
    .contact p {
        font-size: 12px;
    }
    

}

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

    .titre-this {
        width: 100%;
        text-align: unset;
    }

    .wrapy, .wrapytwo {
        width: 100%;
        text-align: center;
        padding-left: 14px;
    }

}



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

    .logomenu {
        margin: 17px 0 0 30px;
    }

    .side-navv {
        display: none;
    }

    .wrapy, .wrapytwo {
        padding-left: 0;
    }

    .wrapy span {
        font-size: 32px;
        letter-spacing: 5px;
        font-weight: 700;
    }

    .soustitre {
        font-size: 12px;
        letter-spacing: 10px;
        margin-top: 0;
    }

    .bottom {
        display: none;
    }

    .nav-dot2, .nav-dot3 {
        display: none;
    }

    .next, .prev {
        transform: none;
    }






    .rotate-text {
        width: 25px;
        transform: none;
    }
    .nav {
        left: auto;
    }

    .next {
        right: -298px;
    }

    .prev {
        bottom: -30px;
        left: 93px;
    }
    .nav-dot {
        bottom: -10px;
        left: 203px;
    }
    .contact div {
        width: 100%;
        margin: 0 auto;
    }
    .contact-left {
        float: none;
        margin-left: 0;
        text-align: left;
    }
    .contact-right {
    float: none;
    text-align: left;
    margin-right: 4%;
}
    .contact {
        height: 60%;
    }
    .contact-left span, .contact-right span {
        overflow: hidden;
        display: block;
        height: 22px;
    }

    .contact p {
        font-size: 11px;
        margin: 0;
    }


.line, .line7, .dot2, .dot3, .dot19, .dot20, .dot21, .dot1 {

    display: none;
}
.line2, .dot4, .dot5, .dot6 {
    left: 16.7%;
}


.line3, .dot7, .dot8, .dot9 {
    left: 33.4%;
}

.line4, .dot10, .dot11, .dot12 {
    left: 50.1%;
}
.line5, .dot13, .dot14, .dot15 {
    left: 66.8%;
}

.line6, .dot16, .dot17, .dot18 {
    left: 83.5%;
}








}


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

.prev {
    left: -23px;
}

.next {
    right: -212px;
}



}


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


.nav-dot {
    left: 189px;
}

.prev {
    left: -31px;
}
.next {
    right: -193px;
}




}



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


.nav-dot {
    left: 184px;
}

.prev {
    left: -34px;
}
.next {
    right: -188px;
}


.contact p {
    line-height: 15px;
}

.contact-left span, .contact-right span {
    height: 32px;
}




}






}















































@font-face {
    font-family: 'montserratbold';
    src: url('fonts/montserrat-bold.woff2') format('woff2'),
         url('fonts/montserrat-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'montserratmedium';
    src: url('fonts/montserrat-medium.woff2') format('woff2'),
         url('fonts/montserrat-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular.woff2') format('woff2'),
         url('fonts/montserrat-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratlight';
    src: url('fonts/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'exodus_-_personal_usesharpen';
    src: url('fonts/exodus--sharpen.woff2') format('woff2'),
         url('fonts/exodus--sharpen.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}