@charset "UTF-8";
/* CSS Document */

body{
	margin: 0;
	background-image: url(images/bg1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	font-family: 'PT Sans Caption', sans-serif;
	background-attachment: fixed;
}

header{
	display: flex;
	justify-content: space-between;
	padding: 0 50px;
	align-items: center;
}

.button{
	background-color: white;
	color: #05B6F4;
	font-size: 12pt;
	height: 50px;
	padding: 8px;
	border-radius: 25px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.19), 0 0px 0px rgba(0,0,0,0.23);
	text-decoration: none;
}
.button:hover{
	background-color: #05B6F4;
	color: white;
}

h1{
	font-family: 'Sarabun', sans-serif;
	font-weight: 700;
	color: white;
}
h1 span{
	color: black;
}

h2{
	font-family: 'PT Sans Caption', sans-serif;
	text-align: left;
	font-weight: 700;
	font-size: 25px;
}

h3{
	font-family: 'PT Sans Caption', sans-serif;
	font-weight: 700;
	font-size: 30px;
	margin: 30px;
}

h4{
	font-size: 12px;
	font-weight: 300;
	margin: 30px;
}

.section{
	display: flex;
	align-items: center;
	justify-content: center;
}

.section div{
	width: 50%;
}

#darkiPhone{
	width: 100%;
	height: auto;
	position: sticky;
    z-index: -1;
}

#screenshot2{
	width: 100%;
	height: auto;
}

.rightalign{
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.leftalign{
	flex-direction: row-reverse;
	align-items: center;
	text-align: right;
}

#first{
	display: flex;
	justify-content: center;
	padding: 0 30px;
	align-items: center;
	text-align: center;
	height: 600px;
}

#h2s{
	width: 50%;
	margin: auto;
}

#h3s{
	height: 600px;
	margin-top: 100px;
}

#first .downloadBadge{
	margin: 30px auto;
}

.features{
	height: 300px;
	padding: 50px;
}

#second{
	background-color: white;
}

.lignes {
	display: flex;
	justify-content: center;
	margin: auto;
}

.lignes img{
	height: 100px;
	width: 100px;
}

#third{
	background-image: url(images/bg2.jpg);
	background-attachment: fixed;
	background-size: cover;
	color: white;
}

#fourth{
	background-color: white;
	padding: 0 50px 0 0;
	height: 400px;
}

#fourth h3{
	color: #2DD43D;
}

#first #greenSchedule{
	height: 100%;
	background-image: url(images/screenshotDarkXSGreen.png);
	background-size: 40%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50px;

}

#fourth #greenSchedule{
	height: 100%;
	background-image: url(images/screenshotDarkXSGreen.png);
	background-size: 40%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50px;

}

#fifth{
	padding: 50px;
	text-align: center;
}

#fifth h5{
	font-family: 'PT Sans Caption', sans-serif;
	font-weight: 700;
	font-size: 50pt;
	margin: 0;
	color: white;
}
#fifth h6{
	font-size: 12pt;
	margin: 10px;
	margin-bottom: 20px;
	color: white;
}

#logo{
	height: 200px;
	width: 200px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 33px;
}


#partenariat .button{
	background-color: white;
	color: #00D52B;
}
#partenariat .button:hover{
	background-color: #00D52B;
	color: white;
}

#partenariat{
	background-image: url(images/bg3.jpg);
}

#partenariat #first{
	height: 300px;
}

#partenariat h2{
	text-align: center;
	color: white;
	font-size: 100px;
}

#partenariat #firstbis{
	background-color: #00D52B;
	color: white;
	display: inherit;
	padding: 30px 20%;
	text-align: center;
	box-shadow: 0 0px 20px rgba(0,0,0,0.19), 0 0px 0px rgba(0,0,0,0.23);
}

#partenariat #firstbis h4{
	font-size: 20px;
}

#partenariat #third {
	text-align: center;
	padding: 30px;
}

#partenariat #fifth{
	display: flex;
	padding: 100px 20%;
	align-items: center;
}

#partenariat h5{
	font-size: 30px;
	text-align: left;
}
#partenariat h6{
	font-size: 18px;
	text-align: center;
}

#partenariat #fifth p{
	color: white;
	font-size: 8pt;
}

#partenariat footer{
	background-color: #00D52B;
}


#contact .button{
	background-color: white;
	color: #FFA701;
}
#contact .button:hover{
	background-color: #FFA701;
	color: white;
}

#contact{
	background-image: url(images/bg4.jpg);
}

#contact #first{
	height: 300px;
}

#contact h2{
	text-align: center;
	color: white;
	font-size: 100px;
}

#contact #firstbis{
	background-color: #FFA701;
	color: white;
	display: inherit;
	padding: 30px 20%;
	text-align: center;
	box-shadow: 0 0px 20px rgba(0,0,0,0.19), 0 0px 0px rgba(0,0,0,0.23);
}

#contact #firstbis h4{
	font-size: 20px;
}

#contact #third {
	text-align: center;
	padding: 30px;
}

#contact h5{
	font-size: 30px;
	text-align: left;
}
#contact h6{
	font-size: 18px;
	text-align: center;
}

#contact #fifth h5{
	text-align: center;
	font-weight: 700;
	font-size: 50pt;
	margin: 0;
	color: white;
}

#contact footer{
	background-color: #FFA701;
}

form{
	display: flex;
	justify-content: center;
	padding: 50px;
}

form #formulaire p{
	font-size: 8pt;
}

form #formulaire .rang{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.demicol{
}

input{
	height: 30px;
	margin-top: -8px;
	border: 1px solid #555;
	outline: none;
	padding: 8px;
	font-size: 12pt;
}

input:focus{
	border: 3px solid #FFA800;
}

.demicol input{
	width: 250px;
}

.colonne input{
	width: 600px;
}

.colonne2 textarea{
	width: 600px;
	height: 300px;
	text-align: left;
	border: 1px solid #555;
	outline: none;
	padding: 8px;
	font-size: 12pt;
}

.colonne2 textarea:focus{
	border: 3px solid #FFA800;
}



footer{
	font-size: 12pt;
	display: flex;
	align-items: flex-end;
}

footer div{
	width: 50%;
	padding: 50px;
}

footer div p{
	color: white;
}

footer div #plusloin{
	font-weight: 600;
}

footer div nav ul{
	list-style: none;
}

footer div nav ul li a{
	color: white;
	text-decoration: none;
	display: block;
	opacity: 0.5;
	margin-top: 5px;
	margin-left: 0px;
}

#legals{
	color: black;
}

footer div nav ul li a:hover{
	opacity: 1;
}

footer div #credits{
	text-align: right;
}