@charset "utf-8";
@media screen {
	p {
		font-family: "open-sans", "lato", "sans-serif";
	}

	.bouton .bout {
		float: left;
		margin-top: 12px;
		margin-left: 12px;
		line-height: 18px;
		font-size: large;
		display: inline;
		color: white;
	}
	
	#big .conteneur .bouton {
		transition: .5s ease;
		background-color: #77767A;
		height: 72px;
		width: 168px;
		margin: auto;
		border-radius: 16px;
		display: inline-block;
	}	
	
	#big .conteneur .bouton:hover {
		background-color: #36ABE1;
		height: 72px;
		width: 168px;
		border-radius: 16px;
		display: inline-block;
	}	

	#big .conteneur {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-around;
		width: 629px;
		margin-left: 169px;
	}

	.gras {
		font-weight: 700;
		display: inline;
	}

	.bouton .style {
		display: inline;
		float: right;
		margin-right: 18px;
		font-weight: 500;
		font-size: xx-large;
		margin-top: -5px;
		color: #FFFFFF;
	}

	.lignefade {
		width: 629px;
		height: 2px;
		margin-top: 10px;
		margin-bottom: 10px;
		background: -webkit-linear-gradient(left, rgb(53,171,226) 0%, rgb(255,255,255)100%); /*safari, chrome */
		background: -o-linear-gradient(left, rgb(53,171,226) 0%, rgb(255,255,255)100%); /*opera*/
		background: -moz-linear-gradient(left, rgb(53,171,226) 0%, rgb(255,255,255)100%); /*mozilla*/
		margin-left: 169px;
	}

	#big 
	{
		display: inline-block;
		margin-top: -429px;
		float: left;
	}

	.bordure2 {
		width: 169px;
		display: block;
		border-right: 2px solid #99CB4F;
		padding-top: 0px;
	}

	.bordure1 #bord1 {
		color: #36ABE1;
		line-height: 26px;
		font-size: xx-large;
		letter-spacing: -3px;
	}

	.bordure2 #bord2 {
		color: #99CB4F;
		line-height: 26px;
		font-size: xx-large;
		letter-spacing: -3px;
	}

	.bordure1 {
		width: 169px;
		display: block;
		border-right: 2px solid #36ABE1;
		border-top-width: 2px;
		border-bottom-width: 2px;
		border-left-width: 2px;
	}

	#head {
		height: 147px;
		background-color: #7B767C;
		display: flex;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	#head h1 {
		color: #FFFFFF;
		font-family: open-sans;
		font-style: normal;
		font-weight: 700;
		letter-spacing: -2px;
		margin-top: 99px;
		margin-right: -9px;
		display: inline-block;
		margin-left: 165px;
	}

	#head #fleche {
		margin-top: 139px;
		margin-left: -233px;
		display: inline-block;
	}


	#big .boite {
		position: relative;
		width: 594px;
		height: 82px;
		margin-left: 190px;
	}

	.boite a .imageID {
		opacity: 1;
		display: block;
		transition: .5s ease;
		backface-visibility: hidden;
	}

	.boite a .mid {
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	#big .boite:hover .imageID {
		opacity: 0.3;
	}

	#big .boite:hover .mid {
		opacity: 1;	
	}

	a .mid .text {
		font-family: "open-sans", "sans-serif";
		color: white;
		background-color: #36ABE1;
		border-radius: 16px;
		font-weight: 600;
		padding: 16px 32px;
	}

	#title {
		display: block;
		width: 275px;
		height: 0px;
		margin-top: 6px;
		margin-bottom: 74px;
		margin-left: 168px;
	}

	#title h2 {
		color: #7B767C;
		font-family: open-sans;
		font-style: normal;
		font-weight: 400;
		letter-spacing: -1px;
		font-size: xx-large;
	}

	#title h2 .necessaire {
		font-weight: 800;
		color: #36ABE1;
	}

	#bas {
		background-color: #7B767C;
		height: 258px;
		clear: both;
		z-index: 1;
		margin-top: -135px;
	}

	#bas .liens .wow {
		color: #FFFFFF;
		font-size: large;
		font-family: open-sans;
		font-style: normal;
		font-weight: 300;
		text-decoration: none;
		margin-left: 180px;
	}

	.liens .wow .» {
		color: #99CB4F;
	}

	#bas .liens .wow:hover {
		font-weight: 500;
		color: #99CB4F;
	}
}