@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

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;
}
html, body {
	font:18px Verdana, sans-serif;
}
body {
	margin:0;
	padding:0;
	transition:background 8s linear;
	line-height:25px;
	width:100%;
	text-rendering:optimizeLegibility;
	background:url(banner_wrapper.svg) top left no-repeat;
}
a, a:active, a:visited {
	 color:#6E70FA;
	 text-decoration:none;
}
* {
	scrollbar-width:thin;
	scrollbar-color:#888 transparent;
}
#home li {
	margin:25px;
}
#gender {
	display:none !important;
}
h1 {
    display:block;
    font-size:2em;
    margin-block-start:0.67em;
    margin-block-end:0.67em;
    margin-inline-start:0px;
    margin-inline-end:0px;
    font-weight:bold;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
header {
	display:block;
    height:750px;
    top:0;
    background:url(/img/fond_header.svg) top center no-repeat;
    background-size:cover;
    position:relative;
    background-position-y:125px;
}
ul#menu {
	margin:0;
	padding:10px 0;
	text-align:center;
}
ul#menu li {
	list-style:none;
	margin:0;
	padding:10px;
}
/* width */
::-webkit-scrollbar {
  width:6px;
  height:6px;
  margin-right:5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
#page {
	width:900px;
	margin:0 auto 100px;
}
#page input[type=text], #page input[type=button] {
	display:block;
	padding:5px;
	border-radius:5px;
	width:300px;
	margin-top:20px;
}
#page input[type=button] {
	cursor:pointer;
}
#page img {
	max-width:100%;
}
#page label {
	cursor:pointer;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
#result {
	margin-top:50px;
}
#result > p {
	margin:0 0 50px;
	padding:0 !important;
}
#slogan {
	font:35px 'Dancing Script', cursive;
	font-weight:bold;
	position:absolute;
	top:300px;
	left:50%;
	width:500px;
	margin:0 -250px;
    -webkit-animation: fadein 9s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 9s; /* Firefox < 16 */
        -ms-animation: fadein 9s; /* Internet Explorer */
         -o-animation: fadein 9s; /* Opera < 12.1 */
            animation: fadein 9s;
}
#content .fa, #header .fa {
	color:black;
	font-size:40px !important;
}
#subheader .fa {
	color:lightgray;
	font-size:40px !important;
	vertical-align:middle;
	margin-left:20px;
}
#subheader .fa-bars {
	font-size:44px !important;
	cursor:pointer;
}
.h3_nomargin {
	margin:0;
}
.h3_nomargin a {
	color:black !important;
}
#subheader {
	margin:0 auto;
	height:70px;
	line-height:70px;
	margin-left:20px;
}
#header_menu {
	text-align:right;
	float:right;
    height:70px;
    line-height: 70px;
    margin-right:20px;
}
#hello {
	text-align:center;
}
#hello h1 {
	vertical-align:middle;
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}
#subtitle {
	font-weight:bold;
	font:35px 'Dancing Script', cursive;
	color:#F9A935;
	vertical-align:middle;
    -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 6s; /* Firefox < 16 */
        -ms-animation: fadein 6s; /* Internet Explorer */
         -o-animation: fadein 6s; /* Opera < 12.1 */
            animation: fadein 6s;
}
#rs {
	height:600px;
	text-align:right !important;
	background:url(/img/trait.svg) top center no-repeat;
	background-size:contain;
	margin-top:50px;
	line-height:600px;
}
#rs img {
	width:10%;
	margin:5px 20px;
	transform: translatey(0px);
}
#subgafa_img {
	text-align:center !important;
	margin-bottom:20px;
}
#rs img:nth-child(1) {
	animation: float 6s ease-in-out infinite;
}
#rs img:nth-child(2) {
	animation: float 12s ease-in-out infinite;
}
#rs img:nth-child(3) {
	animation: float 6s ease-in-out infinite;
}
#rs img:nth-child(4) {
	animation: float 9s ease-in-out infinite;
}
#gafa {
	width:49%;
	display:inline-block;
	vertical-align:middle;
	line-height:25px;
}
#subgafa {
	padding:20px;
}
#img_rs {
	width:49%;
	background:url(/img/rs.svg) bottom center no-repeat;
	background-size:contain;
	height:700px;
	display:inline-block;
	vertical-align:middle;
}
#subdev {
	padding:20px;
}
#wordpress {
	width:100%;
	height:500px;
	background:url(/img/wordpress.svg) bottom left no-repeat;
	background-size:cover;
	color:white;
	margin-top:50px;
}
#subwp {
	width:800px;
	padding:130px 0 0 200px;
}
.work {
	width: calc(33.333% - 5px);
	display:inline-block;
	vertical-align:top;
}
.subcom {
	padding:15px;
}
#menu li {
	display:block;
	list-style:none;
	color:black;
	text-decoration:none;
	padding:10px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	cursor:pointer;
	
	 -moz-user-select: none; /* Firefox */
	 -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	 -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	 user-select: none; /* Propriété standard */
} 
#banner {
    width:200px;
    vertical-align:middle;
}
#content p {
	padding-left:10px;
}
#content div:not(#home) {
	text-align:justify;
}
#devis {
	float:left;
	padding:0 0 0 50px;
}
#devis textarea {
	width:400px;
	height:200px;
	resize:none;
}
#devis select, #devis input, #devis textarea {
	display:block;
	margin:10px 0;
	padding:10px;
	border:1px solid #dedede;
	outline:none;
}
#ecommerce {
	background:url(/img/fond_ecommerce.svg) top center no-repeat;
	background-size:contain;
	color:white;
	margin:100px 0;
	padding:20px;
}
#subec {
	padding:80px;
	width:745px;
	margin:0 auto;
}
#subec img {
	width:250px;
}
body input[type=submit] {
	cursor:pointer;
	border:4px solid #1730a4 !important;
	background-color:white;
	padding:10px !important;
	font-weight:bold;
}
footer {
	background: url(/img/footer.svg) no-repeat;
    background-size:cover;
    height:800px;
    width:100%;
    color:gray;
}
footer #contact {
    color:gray !important;
}
footer #contact h1 {
	font-size:40px !important;
	margin:10px 0;
}
footer #contact a {
	cursor:pointer;
}
footer .fa {
	color:#1730A4;
}
#icons {
    margin-top:50px;
}
#dev {
	background-size:cover;
}
#icons img {
	max-width:70px;
	max-height:70px;
	margin-left:16px;
	transform:translatey(0px);
}

#icons img:nth-child(1) {
	animation: float 6s ease-in-out infinite;
}
#icons img:nth-child(2) {
	animation:float 7s ease-in-out infinite;
}
#icons img:nth-child(3) {
	animation:float 8s ease-in-out infinite;
}
#icons img:nth-child(4) {
	animation:float 6s ease-in-out infinite;
}
#icons img:nth-child(5) {
	animation:float 9s ease-in-out infinite;
}
#icons img:nth-child(6) {
	animation:float 5s ease-in-out infinite;
}

#img_dev {
	background:url(/img/dev.svg) top center no-repeat;
	width:50%;
	float:left;
	height:500px;
}
#subdev {
	margin-top:50px;
	position:relative;
}
.error {
	border:1px solid red !important;
}
#wordpress img {
	transform: rotate(0deg);
	animation: rotate_float 6s ease-in-out infinite;
	float:right;
	margin:2% 29% 0 0;
    width:120px;
}
#contact {
	margin-left:545px;
	background:url(/img/fond_footer.svg) top center no-repeat;
	background-size:contain;
	height:700px;
}

#send_success {
	border:5px solid green;
}

#send_error {
	border:5px solid red;
}

#send_success, #send_error {
	
	display:none;
	width:350px;
	position:fixed;
	top:5px;
	left:50%;
	margin-left:-205px;
	border-radius:5px;
	background-color:white;
	padding:20px;
	
	animation:fadeOut 15s forwards;
	-webkit-animation:fadeOut 15s forwards;
	-moz-animation:fadeOut 15s forwards;
	-o-animation:fadeOut 15s forwards;
	-ms-animation:fadeOut 15s forwards;
}

#address {
	display:none !important;
}

.display {
	display:block !important;
}

#dev_title {
	font-size:1.2em;
}

.facebook_btn {
	display:none;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-3px) translatex(3px);
	}
	75% {
		transform: translatey(3px) translatex(-3px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes rotate_float {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(25deg);
	}
	50% {
		transform: rotate(-25deg);
	}
	75% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  65% {
	opacity:0.8;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  65% {
	opacity:0.8;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  65% {
	opacity:0.8;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  65% {
	opacity:0.8;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  65% {
	opacity:0.8;
  }
  100% {
    opacity:0;
  }
}

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

	header {
		background-position-y:268px;
	}
	#icons img {
		max-width:47px;
	}
}

@media screen and (max-width: 768px) {
	
	html, body {
		font-size:1.7em;
		width:fit-content;
		line-height:1.7em;
	}
	.work {
		display:block;
		width:fit-content;
	}
	#devis {
		display:none;
	}
	#hello {
		display:none;
	}
	#banner {
		display:block;
		width:300px;
		margin:50px auto;
	}
	header #menu button {
		font-size:50px;
	}
	#header_menu {
		position:absolute;
		top:150px;
		right:36px;
	}
	#header_menu img, body #subheader .fa, body .fa {
		width:60px;
		font-size:60px !important;
	}
	#contact {
		margin-left:300px;
		height:500px;
	}
	#subcontact {
		position:relative;
		top:542px;
		right:100px;
		line-height:60px;
	}
	#gafa {
		width:100%;
		line-height:1.7em;
	}
	#img_rs {
		display:none;
	}
	#wordpress {
		height:1180px;
		margin-top:1336px;
	}
	#subwp {
		width:100%;
		padding:30px;
	}
	h2 {
		text-align:left;
	}
	#subec {
		height:600px;
		padding:0;
	}
	#ecommerce {
		background:none;
		color:black;
		margin:100px 0 200px 0;
	}
	footer #contact h1 {
		font-size:50px !important;
	}
}