body {margin:0;width:100%;height:auto;background: linear-gradient(#28786d,#7624c6) no-repeat;overflow-x:hidden;}
/* MENU*/
.sidenav {height:100%; width:0;/* 0 width - change this with JavaScript */position:fixed;/* Stay in place */z-index:2;/* Stay on top */top:0;left:0;background:#20003e;overflow:hidden;/* Disable horizontal scroll */padding-top:75px;-ms-transition:0.5s;-webkit-transition:0.5s;transition:0.5s;}
.sidenav a {padding:20px 20px 20px 75px;text-decoration:none;font-size:25px;color:white;display:block;-ms-transition:0.3s;-webkit-transition:0.3s;transition:0.3s;font-family:'Quicksand',sans-serif;text-align: center;width:max-content}
.sidenav a:hover, .offcanvas a:focus {color:#28786d;font-weight:600}
.sidenav .closebtn {position:absolute;top:0;
right:0;font-size:35px;font-family:'Quicksand',sans-serif;padding:20px 40px}
#main {-ms-transition:margin left.5s;-webkit-transition:margin left.5s;transition:margin left.5s;width:100%;}
.topnav a {float:left;display:block;margin:20px 40px 0}
.picto {width:55px;margin-bottom:-10px;display:block;margin:auto}
/* MENU*/
/* MAIN */
.homepage, .page {width:100%;height:auto;font-family:'Quicksand',sans-serif;}
.homepage a, .page a {transition:all .3s;-ms-transition:all .3s;-webkit-transition:all .3s}
.pageliste {display:inline-block;width:85%;margin:0 2.5% 2.5%;padding:20px 5%;background-color:white;text-align:center}
.pageliste ul {display:inline-block;margin:0 auto;padding:0;max-width:100%;width:900px}
.pageliste li {display:inline-block;width:38%;margin:0 6%;list-style:none;padding:0;float:left}		
.pageliste ul.newsletter {display:flex;margin:0 auto;padding:0;max-width:100%;width:900px}
.pageliste ul.newsletter li {display:inline-block;width:auto;margin:auto;list-style:none;padding:0;float:left}
.pageliste h1 {font-size:35px;text-align:center;margin:0 0 40px;font-weight:normal}
.pageliste img.alldevices {display:block;width:auto;max-width:100%;margin:auto}	
.pageliste img.desktop {display:block;width:auto;max-width:100%;margin:auto}
.pageliste img.mobile {display:none;width:auto;max-width:100%;margin:auto}	
.pageliste p, .pageliste p.skills {font-size:14px;text-align:center;margin:10px 0 60px;font-weight:600}
.pageliste p.skills {text-align:left}
.pageliste p a {width:150px;margin:0 auto;display:inherit;background: linear-gradient(#28786d,#7624c6) no-repeat;color:white;text-align:center;font-size:16px;font-weight:600;padding:10px;-moz-border-radius:30px;
-webkit-border-radius:30px;border-radius:30px;text-decoration:none}
.pageliste p a:hover {background:linear-gradient(#7624c6,#28786d) no-repeat;}
svg {height:20px;fill:#FFFFFF;transition:all .3s;-ms-transition:all .3s;-webkit-transition:all .3s}
svg:hover {fill:#28786d;}	
img {width:100%}
.logo {width:87%;margin:22px auto;text-align:center;float:left}
.logo a {display:inherit}
.logo img {width:300px;margin:0 auto}
/* MAIN */
.icone {width:40px}
/*visuel homepage*/		
.mouton {display:inline-block;position:relative;width:30%;padding:5% 10% 0;float:left}
.mouton a {font-size:35px;font-style:italic;text-transform:uppercase;position:absolute;text-decoration: none;color:white;-webkit-transform:rotate(-14deg);-moz-transform:rotate(-14deg);-o-transform:rotate(-14deg);transform:rotate(-14deg);top:15%;left:25%;font-weight:normal}
.mouton a+a {top:40%;left:20%;}
.mouton a+a+a {top:42%;left:55%;}
.mouton a+a+a+a {top:60%;left:20%;}
.mouton a+a+a+a+a {top:65%;left:50%;}
.mouton a:hover,.mouton a+a+a:hover,.mouton a+a+a+a+a:hover {color:#20003e;font-weight:600}	
/*visuel homepage*/		
/*cv*/		
.cv {display:inline-block;position:relative;width:38%;margin:4% 2%;padding:3% 4%;float:left;background-color:white;z-index:1}
.cv p {font-size:14px;color:#20003e;font-weight:600}
.cv img {width:200px;margin:0 auto;display:block}
.cv p+p {text-align:center}
.cv p+p a {width:130px;margin:10px auto;display:inline-block;background:linear-gradient(#28786d,#7624c6) no-repeat;color:white;text-align:center;font-size:16px;font-weight:600;padding:10px;-moz-border-radius:30px;
-webkit-border-radius:30px;border-radius:30px;text-decoration:none}
.cv a:hover {background:linear-gradient(#7624c6,#28786d) no-repeat;}
/*cv*/	
/*scroll button*/
.wantoscroll {text-align:center;position:fixed;padding:0;margin:0;z-index:1;left:50%;transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);bottom:0}
.wantoscroll a:hover {text-decoration:none}	
.bounce {-webkit-animation-name:bounce;-moz-animation-name: bounce;-ms-animation-name:bounce;-o-animation-name:bounce;animation-name: bounce;}
.wantoscroll p  {-webkit-animation-duration:2s;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;}
.wantoscroll p img {opacity:0}	
@-webkit-keyframes bounce {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-15px);}60% {-webkit-transform: translateY(-10px);}
}
@-moz-keyframes bounce {0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}40% {-moz-transform: translateY(-15px);}60% {-moz-transform: translateY(-10px);}
}
@-ms-keyframes bounce {0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}40% {-ms-transform: translateY(-15px);}60% {-ms-transform: translateY(-10px);}
}
@-o-keyframes bounce {0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}40% {-o-transform: translateY(-15px);}60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-15px);}60% {transform: translateY(-10px);}
}
.bounce {-webkit-animation-name: bounce;-moz-animation-name: bounce;-ms-animation-name: bounce;-o-animation-name: bounce;animation-name: bounce;
}
/*scroll button*/
/*contact*/
.contact {display:inline-block;text-align:center;position:relative;margin:0 auto 40px;width:100%;z-index:1}
.contact a {display:inherit}
.contact img {margin:0 20px}
/*contact*/	
@media screen and (max-width:1600px) {
.logo {width:84%;}	
.mouton a {top:13%}
.mouton a+a {top:40%}
.mouton a+a+a {top:38%}
.mouton a+a+a+a {top:63%}
.mouton a+a+a+a+a {top:70%}
.cv {margin:0 2% 2%}
}	
@media screen and (max-width:1440px) {
.logo {width:82%;}	
.mouton a {left:20%;top:13%}
.mouton a+a {left:15%;top:38%}
.mouton a+a+a {left:50%;top:41%}
.mouton a+a+a+a {left:15%;}
.mouton a+a+a+a+a {left:45%;top:70%}
}
@media screen and (max-width:1366px) {
.logo {width:80%;}		
.mouton {padding:4% 10%}
.cv img {width:150px}	
}	
@media screen and (max-width:1024px) {
.logo {width:75%;}	
.mouton {width:40%;padding:60px 5%}
.mouton a {left:10%;top:12%;font-size:30px;}
.mouton a+a {left:10%;top:35%}
.mouton a+a+a {left:55%;top:37%}
.mouton a+a+a+a {left:10%;top:57%}
.mouton a+a+a+a+a {left:55%;top:60%}
.cv {width:44%;padding:3% 1%}
.pageliste ul, .pageliste ul.newsletter {max-width:100%;width:100%}	
}
@media screen and (max-width:800px) {
.logo {width:70%;}
.mouton {width:70%;padding:60px 15%}
.mouton a {left:20%;}
.mouton a+a {left:10%;}
.mouton a+a+a+a {left:10%;}
.cv {margin:30px;width:auto;padding:8%}
.wantoscroll p img {opacity:1}
.sidenav a {padding:10px 20px 10px 50px}
.pageliste img.desktop {display:none}
.pageliste img.mobile {display:block}
.pageliste li {width:100%;margin:0}
.pageliste ul.newsletter {display:inline-block}
.pageliste ul.newsletter li {width:100%;}
.pageliste ul.newsletter li img {width:auto;max-width:100%}		
}
@media screen and (max-width:768px) {
.wantoscroll {top:70%}		
}
@media screen and (max-width:600px) {
.wantoscroll {top:60%}
.logo {width:60%;}	
}		
@media screen and (max-width:480px) {
.logo {width:70%;}		
.icone {width:30px}
.picto {width:40px}	
.topnav a {margin:20px}
.logo img {width:240px;}
.mouton {padding:40px 15%}
.mouton a {left:15%;font-size:25px}
.mouton a+a {left:15%;}
.mouton a+a+a+a {left:15%;}
.wantoscroll {top:58%}	
.sidenav {padding-top:50px}	
.sidenav a {font-size:20px}
.sidenav .closebtn {font-size:25px;padding: 20px}
.pageliste h1 {font-size:25px}	
}
@media screen and (max-width:375px) {
.logo {margin:20px auto;width:65%}
.mouton {padding:60px 5%;width:90%}
.mouton a {left:8%;top:12%}
.mouton a+a {left:8%;}
.mouton a+a+a {top:38%}	
.mouton a+a+a+a {left:8%}
.wantoscroll {top:75%}
}
@media screen and (max-width:320px) {
.topnav a {margin:10px;}
.logo {margin:10px auto;width:auto}
.mouton a {left:2%}
.mouton a+a {left:5%;}	
.mouton a+a+a+a {left:5%;}
.sidenav .closebtn {padding:10px 20px}
}