/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 *{
 	box-sizing: border-box;
 }

 @font-face{
 	font-family: 'Brian James';
 	src: url(fonts/BrianJames.ttf) format('truetype');
 	font-display: swap;
 }
 
 @font-face{
     font-family:'Bellota';
     src: url(fonts/Bellota-Bold.ttf) format('truetype');
     font-display: swap;
 }
 
 
 
 
 
  #loading-section{
 	position: fixed;
 	width: 100vw;
 	height: 100vh;
 	left: 0;
 	top: 0;
 	background-color: #192477;
 	transition: all 0.5s ease-out;
 	z-index: 1000;
 	display: flex;
 	flex-direction: column;
 }

 .loading-text{
 	position: relative;
 	width: 20vw;
 	font-size: 4vw;
 	text-align: center;
 	position: absolute;
 	top: 0;
 	left: 0;
 	transform-origin: center;
 	transform: translateX(40vw) translateY(40vh);
 	font-family: 'Brian James';
 	text-transform: uppercase;
 	animation: loadingtext 2s ease-in-out;
 	animation-iteration-count: infinite;
 }

 .loading-text:after{
 	content: "";
 	background: url(img/marion-runs-little-transparent-ok.gif) center no-repeat;
 	background-size: contain;
 	padding: 5vh;
 	z-index: 1001;
 	position: absolute;
 	bottom: 4vh;
 	left: 0;
 	animation: gifloader 10s linear;
 	animation-iteration-count: infinite;
 }
 
 @keyframes loadingtext{
     0%{
         text-shadow: 0 0 30px #f85b80;
         color:#192477;
     }
     50%{
         text-shadow: 0 0 0 #f85b80;
         color:inherit;
     }
     100%{
         text-shadow: 0 0 30px #f85b80;
         color:#192477;
     }
 }

 @keyframes gifloader{
 	0%{
 		transform: translateX(0vw) scaleX(100%);
 	}
 	49.9%{
 		transform: translateX(15vw) scaleX(100%);
 	}
 	50%{
 	    transform:translateX(15vw) scaleX(-100%);
 	}
 	100%{
 	    transform:translateX(0vw) scaleX(-100%);
 	}
 }

 #loading-section.fade-out{
 	opacity: 0;
 }
 
 





 body{
 	font-family: 'Bellota', sans-serif;
 	font-size: 2.5vh;
 	line-height: 1.5em;
 	overflow-y: hidden;
 	min-height: 100vh;
 	cursor: url("img/cursor-neutral64px-pink-shadow.png")0 0,default;
 	background: url(img/fond-fixe_web.webp) no-repeat top center, #000000;
 	background-size: cover;
 	background-blend-mode: difference;
 	color: #ffb3dd;
 	scrollbar-width: none;
 }

  #exNB0ETCf8m1{
 	position: absolute;
 	overflow-x: hidden;
 	min-height: 100vh!important;
 	top: 0;
 	left: 0;
 	z-index: 0;
 }


 h1{
 	font-family: 'Brian James', serif;
 	font-size: 4vw;
 	line-height: 0.9em;
 	text-transform: uppercase;
 }

 h2{
 	font-family: "Brian James", serif;
 	font-size: 2vw;
 	line-height: 1.2em;
 	margin-bottom: 5vh;
 }

 h3{
 	font-family: "Brian James", serif;
 	font-size: 1.5vw;
 	line-height: 1.2em;
 	margin-bottom: 1.2vh;
 }

 a{
  cursor: url("img/cursor-click64px-pink-shadow.png")0 0,pointer;
  transition-duration: 300ms;
  color: #ffb3dd;
 }

  nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
}

 nav a:hover{
	filter:saturate(0%);
	transition-duration: 300ms;
 }


header nav ul{
	display: flex;
	justify-content: space-between;
	list-style: none;
	width: 70%;
}

ul a{
	font-size: 1.5vw;
	text-decoration: none;
	text-transform: uppercase;
}

.button{
	font-family: 'Brian James', sans-serif;
	color: #192477!important;
	font-size: 2vw;
	line-height: 1.2em;
	background-color: #ffb3dd;
	padding: 10px 20px;
	border-radius: 1em;
	text-decoration: none;
	text-transform: uppercase;
	transition-duration: 300ms;
	border: solid;
	border-width: 0px;
}

.button:hover{
	color: #ffb3dd!important;
	background-color: #192477;
	transition-duration: 300ms;
	border-width: 3px!important;
	border-color: #8c53B9;
	padding: 7px 17px;
}

 .wrapper{
 	width: 80vw;
 	margin: 0 auto;

 }

 header{
 	font-family: 'Brian James', serif;
 	width: 100vw;
 	height: 10vh;
 	margin: 0;
 	overflow: hidden;
 	position: fixed;
 	top: 0;
 	z-index: 1;
 	display: flex;
 	align-items: center;
 }

 .logo{
 	background: url("img/logo-marion-bievelot-bournez-poulpe-crayon.svg") no-repeat center;
 	background-size: 10vh;
 	padding: 5vh;
 	transition: 300ms;
 	 }

 .logo:hover{
 	filter: saturate(0%);
 	transition: 300ms;
 }

  #about{
 	background: url("img/logo-marion-bievelot-bournez-poulpe-crayon.svg") bottom right no-repeat;
 	background-size: 20vw;
 	background-blend-mode: overlay;
 }

 #about h1{
 	mix-blend-mode: color-dodge;
 }

.cloud{
	padding: 17vh 8vw 1vh 0;
	background: url("img/cloud_web.webp") right no-repeat;
	background-blend-mode: difference!important;
	background-size: contain;
}

.cloud h1{
	line-height: 0.75em!important;
	font-size: 4.05vw;
	margin-bottom: 1vw;
}

.cloud span{
	font-size: 10vw;
}

#motion .cloud2{
    background: url("img/cloud_web.webp") right no-repeat;
	background-blend-mode: difference!important;
	background-size: contain;
}

#graphisme .cloud2, #web .cloud2{
    background: url("img/cloud_web.webp") left no-repeat;
	background-blend-mode: difference!important;
	background-size: contain;
}

.cloud2 h1, .cloud2 h2{
    mix-blend-mode: color-dodge;
}


#graphisme, #web{
	padding-left: 10vw;
	background-size: cover;
}

#graphisme a{
	opacity: 0;
}

#graphisme li:hover a{
	font-family: 'Brian James';
/*	color: #FF1155;*/
	font-size: inherit;
	text-decoration:underline;
	text-transform: uppercase!important;
	opacity: 1;
}

 .slide{
 	width: 100vw;
 	height: 100vh;
	text-align: right;
 	padding-right: 10vw;
 	/*padding-top: 120px;*/
 	padding-top:15vh;
 	cursor: url("img/cursor-scroll-vertical-pink-shadow.png")0 0, e-resize;
 	z-index: 10;
 }

 #motion{
    padding-left: 10vw;
 }

 .competences{
 	text-align: left;
 }



 .blocHorizontal{
 	background: url("img/fond-long_web.webp") center left no-repeat,linear-gradient(90deg, #f8007580 0%, #0b907680 50%, #2233FF80 100%)!important;
 	background-size: cover;
 	background-blend-mode: difference;
 	display: flex;
 	flex-direction: row;
 	width: 500vw;/* largeur du container pour x slides = x*100vw*/
 	transform: rotate(90deg) translateY(-100vh);
 	transform-origin: top left;
 }


 .container{
 	transform-style: preserve-3d;
 	width: 100vh;
 	height: 100vw;
 	transform: rotate(-90deg) translateX(-100vh);
 	transform-origin: top left;
 	overflow: scroll;
 	overflow-x: hidden;
 	scroll-behavior: smooth;
 }



 ::-webkit-scrollbar{
 	display: none;
 }

 /*.one{
 	background-size: cover;
 }

 .two{
 	background-color: #0000FF50;
 }

 .three{
 	background-color: #00ff0050;
 }

 .four{
 	background-color: #ff00ff50;
 }
 .five{
 	background-color: #00000050;
 }*/



 /*GRAPHISME*/

 .testbook{
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	min-height: 61vh;
 	min-width: 80vw;
 }

 .testbookpage{
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
 	min-height: 100%;
 	width: 5vw;
 	transition-duration: 1000ms;
 	filter: grayscale(100%);
 	overflow-x: hidden;
 }

 .testbookpage p{
 	padding-left: 1vw;
 	color: transparent;
 	text-align: left;
 	min-width: 10vw;
 	background-color: transparent;
 	overflow-x: hidden;
 	transition: 1000ms;
 }

 .testbookpage:hover{
 	width: 50vw;
 	transition-duration: 1000ms;
 	filter: grayscale(0%);
 	background-size: auto 100%;
 	background-color: #4B323E;
 }

  .testbookpage:hover p{
  	color:inherit;
 	background-color: #00000090;
 	transition: 1000ms;
 }




 .page1{
 	background: url(img/logo-Unbraze-wall_web.webp) no-repeat center;
 	background-size: auto 100%;
 }

  .page2{
 	background: url(img/logo-valentin-cours-de-guitare_web.webp) no-repeat center;
 	background-size: auto 100%;
 }

  .page3{
 	background: url(img/madstorylab-writers_web.webp) no-repeat center;
 	background-size: auto 100%;
 }

 .page4{
 	background: url(img/apero-mad_web.webp) no-repeat center;
 	background-size: auto 100%;
 }

 .page5{
 	background: url("img/couverture-madstorylab_web.webp") no-repeat right;
 	background-size: auto 100%;
 }

 .page6{
 	background: url("img/paysage_web.webp") no-repeat center;
 	background-size: auto 100%;
 }

 .page7{
 	background: url("img/logo-tinker-tailor_web.webp") no-repeat center;
 	background-size: auto 100%;
 }

 .page8{
 	background: url("img/ficelle-et-papier-logo_web.webp") no-repeat center;
 	background-size: auto 100%;
 }

 .page9{
 	background: url("img/logo-persefox_web.webp") no-repeat center;
 	background-size: auto 100%;
 } 

 .page10{
 	background: url("img/tinker-tailor-carte-de-visite_web.webp") no-repeat center;
 	background-size: auto 100%;
 } 
 
  .page11{
 	background: url("img/logo-plumf.webp") no-repeat center;
 	background-size: auto 100%;
 }
 
   .page12{
 	background: url("img/logo-a-la-bisaine_web.webp") no-repeat center;
 	background-size: auto 100%;
 }
 
    .page13{
 	background: url("img/illus-cv-2023_web.webp") no-repeat center;
 	background-size: auto 100%;
 }

.page14, .page15, .page16, .page17{
 	background-color: red;
 }




 #creagraphisme{
 	min-width: 80vw;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 }

  .visible{
  	display: flex!important;
  }

  /*MOTION*/

#videos{
    min-width: 80vw;
    max-width: 50vw;
    height: 60vh!important;
/*  margin:0 auto;*/
    overflow: hidden;
    position:relative;
}

#videos .navslider{
    bottom: 20%;
}

#slidermotioncontainer > a{
    text-decoration: none;
    font-size: 5vw;
}

#slidermotioncontainer{
    display: flex!important;
    flex-direction: row;
    width: 640vw;
    height: 60vh;
    background-color: #24454498;
}

#slidermotioncontainer > div{
    height: 100%;
    width: 80vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}

#slidermotioncontainer > div > iframe{
    width: 65%;
    height: 100%;
}

#slidermotioncontainer > div > div{
    padding: 5vh 5vw 2vh 5vw;
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: safe flex-start;
    gap: 2vh;
}

.motionposition1{
    transform: translateX(0vw);
    transition: 1000ms ease-in-out;
}

.motionposition2{
    transform: translateX(-80vw);
    transition: 1000ms ease-in-out;
}

.motionposition3{
    transform: translateX(-160vw);
    transition: 1000ms ease-in-out;
}

.motionposition4{
    transform: translateX(-240vw);
    transition: 1000ms ease-in-out;
}

.motionposition5{
    transform: translateX(-320vw);
    transition: 1000ms ease-in-out;
}

.motionposition6{
    transform: translateX(-400vw);
    transition: 1000ms ease-in-out;
}



/*  #videos{
  	display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
  	justify-content: flex-end;
  	gap: 5vh;
  }

  #videos p{
  	text-align: center;
  	background-color: #0B385398;
  }

  .localvid{
  	background-color: black;
  }

  iframe{
  	margin-bottom: 0!important;
  }

  iframe,video{
  	max-height: 25vh;
  	max-width: 25vw;
  }

  #videos div{
  	position:relative;
  }

  #videos>div>p{
  	position:absolute;
  	width:100.2%;
  	bottom:-2.8vh;
  }*/

  /* WEB */

  #creaweb{
  	display:flex;
  	flex-direction: row;
  	gap:5vh;
  	width:100%;

  }

  .textweb{
  	text-align: center;
  	border:solid;
  	border-color:#FFB3DD;
  	border-width: 1px;
  	padding:1vw 1vw;
  	background-color: #0B385398;
  	background-blend-mode: overlay;
  	display:flex;
  	flex-direction: column;
  	/*justify-content: space-around;*/
  }

    .textweb p:nth-child(3){
  	padding-bottom: 2vh;
  }

  .pictos-web{
  	width:90%;
  	margin:0 auto;
  	display: flex;
  	flex-direction: row;
  	justify-content: space-around;
  	gap:2vw;
  	margin-bottom: 3vh;
  }

  #wordpress{
  	background:url(img/wordpress-picto.svg) center no-repeat;
  	background-size: contain;
  	padding:2vw;
  }

   #wix{
  	background:url(img/wix-picto.svg) center no-repeat;
  	background-size: contain;
  	padding:2vw;
  }

   #html-css-js{
  	background:url(img/html-css-js-picto.svg) center no-repeat;
  	background-size: contain;
  	padding:2vw 4vw;
  }

  #creaweb div:last-child p{
  	margin-bottom: 1.5vh;
  }
  
 .sliderframe{
	min-width: 50vw;
	max-width: 50vw;
	height: 60vh!important;
/*	margin:0 auto;*/
	overflow: hidden;
	position:relative;
}

.sliderframe a{
	text-decoration: none;
	font-size:50px;
}

.slider p, .position2>.slider>p{
	position:absolute;
	left:0;
	bottom:0;
	text-align: left;
	padding:0 2vw;
	background-color: #0B385398;
	width:100%;
}

#slidercontainer{
	display:flex;
	flex-direction: row;
}

.position1{
	transition: 300ms ease-in-out;
}

.position2{
	transform: translateX(-50vw);
	transition: 300ms ease-in-out;
}

.position3{
	transform: translateX(-100vw);
	transition: 300ms ease-in-out;
}

.position4{
	transform: translateX(-150vw);
	transition: 300ms ease-in-out;
}

.slider{
	display:flex;
	justify-content: space-between;
	align-items: center;
	min-width:50vw;
	min-height:60vh;
/*	min-width:37.5vw;*/
/*	min-height: 50vh;*/
	padding: 0 1vw;
}

.slider1{
	background:url(img/slash1_web.webp) center top no-repeat;
	background-size: cover;
}

.slider2{
	background:url(img/slash2_web.webp) center top no-repeat;
	background-size: cover;
}

.slider3{
	background:url(img/slash3_web.webp) center top no-repeat;
	background-size: cover;
}

.slider4{
	background:url(img/slash4_web.webp) center top no-repeat;
	background-size: cover;
}

.navslider{
	display:flex;
	justify-content: space-between;
	width:100%;
	position:absolute;
	bottom:40%;
	padding:0 1vw;
}

.navslider a{
    text-decoration: none;
    padding: 2vw;
}

.navslider a:hover{
    filter: saturate(0%);
}

.navslider a:first-child{
    background: url(img/arrow-left.png) center no-repeat;
    background-size: 100%;
    color: transparent;
}

.navslider a:last-child{
    background: url(img/arrow-right.png) center no-repeat;
    background-size: 100%;
    color: transparent;
}

  /* CONTACT */

  #contact{
 	text-align: center;
/* 	padding-top: 18vh!important;
*/ 	padding-right: 0;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-around;
 	background: linear-gradient(90deg, #00000000 0%, #192477ff 50%);

 }

 #contact h1{
 	margin-bottom: 2vh;
 }


  #intro{
  	max-width: 30vw;
    text-align: left;
  }

  .poweredby{
    background: url(img/logo-powered-by.svg) center no-repeat;
    padding: 12vh;
    background-size: auto;
    width: 40%;
  }
 
  	#contactcontent, #aboutme{
 	    display:flex;
 	    flex-direction:row;
 	    justify-content:space-between;
 	    align-items:center;
 	    min-width:60vw;
 	}
 	
 	#contactcontent div:first-child{
 	     width:40%;
 	     height:100%;
 	}
 	
 	
 	#contactcontent ul{
 	    display:flex;
 	    flex-direction:row;
 	    justify-content:space-between;
 	    gap: 4vw;
 	    align-items:center;
 	    min-height:100%;
 	}
 	
 	#contactcontent ul li{
 	    min-height:100%;
 	}
 	
 	
 	#insta-icon{
 	    background:url(img/instagram-logo-pink.svg) center no-repeat;
 	    padding:6vh;
 	    transition:300ms;
 	}
 	
 	#behance-icon{
 	    background:url(img/behance-logo-pink.svg) center no-repeat;
 	    padding:6vh;
 	    transition:300ms;
 	}
 	
 	#linkedin-icon{
 	    background:url(img/linkedin-logo-pink.svg) center no-repeat;
 	    padding:6vh;
 	    transition:300ms;
 	}
 	
 	#insta-icon:hover, #behance-icon:hover, #linkedin-icon:hover{
 	    filter:saturate(0);
 	    transition:300ms;
 	}
 	
 	#contactinfos{
 	    display:flex;
 	    flex-direction:column;
 	    align-items:center!important;
 	    width:45%;
 	    border:solid;
 	    border-width:1px;
 	    border-color:#ffb3dd;
 	    padding-top:5vh;
        padding-bottom: 2vh;
        height: 100%;
 	}
 	
 	#contactinfos p{
 	    margin-bottom:2vh;
 	}


 footer > div{
 	display: block;
 	background-color: #00000090;
 	position: fixed;
 	width: 100vw;
 	height: 3vh;
 	bottom: 0px;
 	padding-left: 10px;
 }

 .burger{
 	display:none;
 }

 /***********************RESPONSIVE TABLETE ******************************/

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

 	body{
 		max-width:100vw;
 		overflow-x: hidden;
 		overflow-y: hidden;
 	}

 	 	main{
 		min-height:100vh;
 	}
 	
 	#exNB0ETCf8m1{
 	    min-height:150vh!important;
 	    position:absolute;
 	}

 	.wrapper{
 		width:90vw;
 		margin:0 auto;
 	}

 	h1{
 		font-size: 9vw;
 	}

 	h2{
 		font-size: 5vw;
 	}

 	h3{
 		font-size: 5vw;
 		text-transform: uppercase;
 	}

 	header{
 		background-color: #30303090;
 	}

 	header nav ul{
 		width: 90%;
 	}

 	header nav ul a{
 		font-size: 3vw!important;
 	}

 	.cloud h1{
		line-height: 0.75em!important;
		font-size: 4.5vh;
		margin-bottom: 1vw;
	}

	.cloud span{
		font-size: 10vh;
	}

 	svg{
 		height: 100vh;
 		width:100vw;
 		transform: scaleY(2.1);
 	}

 	.two, .three, .four, .five{
 		padding-top: 15vh!important;
 	}
 	 .container{
	 	width: 100vw;
	 	min-height: 100vh!important;
	 	transform: rotate(0deg) translateX(0vh)!important;
	 	overflow-y: scroll;
	 	scroll-behavior: smooth;
 	}

 	.blocHorizontal{
 		height:800vh;
 		transform: rotate(0deg) translateY(0vh)!important;
 		flex-direction:column;
 		justify-content: space-between;
 		background-image: none!important;
/* 		background: linear-gradient(180deg, #f8007580 0%, #0b907680 50%, #2233FF80 100%)!important;*/
 		background: linear-gradient(180deg, #f8007599 0%, #0b907699 50%, #2233FF99 100%)!important;

 		background-size: cover;
 	}

 	#about{
 		height:70vh;
 		padding-right: 0;
 		padding-bottom: 40vh;
 	}

    #web, #motion{
 		height: 300vh;
 		padding: 0 5vw;
 	}
 	
 	#graphisme{
 	    height:300vh;
 	    width:100vw;
 	    padding:0 0;
 	}
 	
 	#graphisme h1, #graphisme h2{
 	    padding-left:3vw;
 	}

 	#graphisme ul{
 		flex-direction: column;
 	}

 	#graphisme li{
 		width:100vw;
 		height: 20vh;
 		background-size: cover;
 		filter:none;
 		position:relative;
 	}

 	#graphisme li:hover{
 		height:30vh;
 	}

 	.page1::after{
 		content:"";
 		background:url(img/touch-white.svg) right no-repeat;
 		background-size: cover;
 		padding:5vh;
 		position:absolute;
 		right:0;
 		z-index: 2;
 		transition: 300ms;
 		opacity: 80%;
 	}



/*    #motion{
        height: 100%;
    }*/

 	#videos{
        height: 120vh!important;
        min-width: 90vw;
 		padding-left: 0;
 	}

    #slidermotioncontainer{
        width: 540vw;
        min-height: 100%;
    }

    #slidermotioncontainer > div{
        min-width: 90vw;
        min-height: 100%;
        flex-direction: column;
        justify-content: space-between;
    }

    #slidermotioncontainer > div > div{
        padding: 5vh 5vw;
        width: 100%;
        height: 70%;
        justify-content: space-between;
    }

    #slidermotioncontainer > div > div:after{
        content: "";
        background: url(img/logo-marion-bievelot-bournez-poulpe-crayon.svg) center no-repeat;
        padding: 20%;
        background-size: contain;
        justify-self: flex-end;
    }

    #slidermotioncontainer h3{
        margin: 0 auto;
        text-align: center;
    }

    #videos iframe{
        min-width: 100%;
        min-height: 50vh;
        max-height: 50vh;
    }

    #videos .navslider{
        bottom: 50%!important;
    }

    .motionposition2{
        transform: translateX(-90vw);
    }

    .motionposition3{
        transform: translateX(-180vw);
    }

    .motionposition4{
        transform: translateX(-270vw);
    }

    .motionposition5{
        transform: translateX(-360vw);
    }

    .motionposition6{
        transform: translateX(-450vw);
    }


/* 	#videos>div>p{
  		bottom:-2.5vh;
  	}

	 iframe,video{
  		max-height: 20vh;
  		min-width: 90vw;
  	}*/

    /******************** WEB ********************/

  	  	#creaweb{
  		flex-direction: column;
  	}

  	.sliderframe{
  	 	min-width:90vw;
  	 	overflow: scroll;
  	}

  	.slider{
  		min-width:90vw;
  	}

  	.position2{
		transform: translateX(-90vw);
	}

	.position3{
		transform: translateX(-180vw);
	}

	.position4{
		transform: translateX(-270vw);
	}

	.textweb{
		padding: 5vw;
	}

	#wordpress{
	  	background:url(img/wordpress-picto.svg) center no-repeat;
	  	background-size: contain;
	  	padding:3vh;
	}

   	#wix{
	  	background:url(img/wix-picto.svg) center no-repeat;
	  	background-size: contain;
	  	padding:3vh;
	}

   	#html-css-js{
	  	background:url(img/html-css-js-picto.svg) center no-repeat;
	  	background-size: contain;
	  	padding:3vh 6vh;
	}


 	#contact{
 		padding:0 5vW 5vh 5vw;
 		background: linear-gradient(180deg, #00000000 0%, #192477ff 70%);
 	}
 	
 	#contact h2{
 	    margin-bottom:2vh;
 	}

 	#contact div{
 		max-width: 100%;
 		text-align: center;
 		padding-bottom: 2vh;
 	}
 	
  	
  	#contactcontent{
        width: 100%;
  	    flex-direction:row;
  	    justify-content:space-between;
  	    align-items:center;
  	}
  	
/*  	#contactcontent div, #contactcontent div:first-child{
  	    width:90vw;
  	}*/
  	
  	#contactcontent div:first-child ul{
/*  	    width:100%;*/
  	    justify-content:space-between;
  	}
  	
  	
  	#contactcontent ul li a{
  	    padding:4vh;
  	}
  	
  	#contactinfos{
        padding-top: 2vh;
  	    min-width:90vw;
/*  	    margin-bottom:4vh;*/
  	}

    #aboutme{
        flex-direction: column;
    }

    #contactcontent{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

        .poweredby{
        width: 20%!important;
        background-position: right;
    }
 	


 	.button{
 		font-size: 5vw;
 	}
 }

  /***********************RESPONSIVE MOBILE ******************************/

  /*@media only screen and (max-width: 414px){

  	body{
  		font-size: 2.2vh;
  	}

  	#about{
  		padding-bottom: 30vh;
  		margin-bottom: 20vh;
  		background-size: 20vh;
  	}

  	.sliderframe{
  	 	min-height:40vh;
  	 	max-height: 40vh;
  	 	overflow: scroll;
  	}

  	.slider{
  		min-height:40vh;
  		max-height: 40vh;
  	}

  	#videos>div>p{
  		bottom:-2.1vh;
  	}

  	.cloud{
  		background-size: cover;
  	}


	header{
		transition: 300ms;
	}

	header.open{
		height:100vh;
		align-items: flex-start;
		padding-top: 2.7vh;
		background-color: #192477;
		transition: 300ms;
	}

	#menu{
		display:none;
		flex-direction: column;
		transition: 300ms;
		align-items: center;
	}

	#menu li a{
		font-size: 10vw!important;
		padding-bottom: 10vw!important;
	}

  	#menu.visible{
  		display: flex;
  		position:absolute;
  		top:20vh;
  		gap:10vh;
  		transition: 300ms;
  	}

  	.burger{
  		display:flex;
  	}

  	.burger a{
  		background: url(img/burger.svg) center no-repeat;
  		background-size: 32px;
  		padding:16px 16px;
  	}

  	  #contact div:first-child{
  	/*background: linear-gradient(180deg, #19247700 0%, #192477ff 20%);
  	width: 100%;
  	}

  }



 */